Hi 🤓 Cảm ơn bạn đã ghé thăm blog này, nếu những bài viết trên blog giúp ích cho bạn. Bạn có thể giúp blog hiển thị quảng cáo bằng cách tạm ngừng ad blocker 😫 và để giúp blog duy trì hoạt động nếu bạn muốn.
Cảm ơn bạn!

Cách dễ dàng để tìm parent div thông qua child div trong javascript

@devnavMar 16, 20212 min read...

Đề bài

Mình giả sử chúng ta có các parent div và children div. Đề bài yêu cầu chúng ta ẩn parent div tương ứng sau khi ta click vào children div sử dụng javascript.

Để dễ hình dung thì các bạn xem ví dụ dưới đây:

<div class="container">
  <div class="parent">
    <div class="box-content">
      <ul>
        <li><span class="children">children</span></li>
      </ul>
    </div>
  </div>
  <div class="parent">
    <div class="box-content">
      <ul>
        <li><span class="children">children</span></li>
      </ul>
    </div>
  </div>
  ...
</div>

Sau đây là cách mình áp dụng trong trường hợp này.

Thực hành

Mình sẽ add event cho children và khi click vào mình sẽ tìm tới parent của nó và ẩn parent tương ứng đi.

const children = document.querySelectorAll('.children');
children.forEach((child) => {
    child.addEventListener('click', function (event) {
        ...
    });
});

Thông thường chúng ta sẽ tìm parent thông qua event.target hoặc trong trường hợp này mình sẽ tìm phần tử parent thông qua các children có tên là child.

const parentDiv = child.parentElement.parentElement.parentElement.parentElement;

Cách trên chỉ sử dụng khi children gần với parent. Như ở trên, muốn lấy parent ta phải thông qua 4 cấp parentElement, nhìn trông không được dễ hiểu và ngắn gọn cho lắm 😁🔥.

Sau đây ta sẽ có một cách khác ngắn gọn hơn:

  function findParent(child, parentClass) {
    let parent = child.parentElement;
    while (parent) {
        if (parent.classList.contains(parentClass)) 
        {
            break;
        }
        parent = parent.parentElement;
    }
    return parent;
}

Đây là function tìm parent div thông qua child. Ta sẽ dừng while loop ở trên khi trong classList của parent chứa class parent mà ta truyền ở trên.

Các bạn sử dụng cách trên hoặc sử dụng ở câu lệnh if điều kiện sau vẫn được nhé ^^:

function findParent(child, parentClass) {
    let parent = child.parentElement;
    while (parent) {
        //👇 
      if (parent.classList.value.includes(parentClass))
        {
            break;
        }
        parent = parent.parentElement;
    }
    return parent;
}

Cuối cùng ta chỉ việc ẩn parent div khi click vào child bằng cách thêm display: none cho parent ta đã tìm được ở trên.

Sau đây là code hoàn chỉnh của chúng ta:

const children = document.querySelectorAll('.children');
children.forEach((child) => {
    child.addEventListener('click', function () {
        // const parent =
        //     ele.parentElement.parentElement.parentElement.parentElement;
        const parent = findParent(child, 'parent');
        parent.style.display = 'none';
    });
});

function findParent(child, parentClass) {
    let parent = child.parentElement;
    while (parent) {
        if (parent.classList.value.includes(parentClass)) {
            break;
        }
        parent = parent.parentElement;
    }
    return parent;
}

👉 Như vậy là mình đã hướng dẫn cho các bạn cách để tìm parent thông qua các child rồi. Hy vọng các bạn sẽ hiểu, thực hành và tìm được thêm cho mình cách làm hay và tối ưu hơn nữa để xử lí vấn đề mà đề bài đặt ra.

Happy coding 🔥🔥🔥

TABLE OF CONTENTS

Cách dễ dàng để tìm parent div thông qua child div trong javascript

Đề bài

Thực hành