[ JavaScript ] closest()

구문

closest(selector) (selector 는 css선택자 문자열)

반환값

selectors에 일치하는 가장 가까운 조상 Element 또는 자기 자신, 일치하는 요소가 없으면 null.

사용

• 특정 클래스를 가진 부모 요소를 찾고 싶을 때
• 이벤트 위임(Delegating Events)을 해야할 때

//수정 , 삭제 버튼 ,체크박스 눌렀을 때

containerEl.addEventListener('click', async e => {
  const todoEl = e.target.closest('li');
  const todoElText = todoEl.querySelector('.list--text');
  const todoId = e.target.closest('li').id;
  if (e.target.classList.contains('icon--edit')) {
    await editTodo(todoEl.id, todoElText.textContent, todoEl.dataset.done);
    alert('수정되었습니다!');
    return;
  } else if (e.target.classList.contains('icon--delete')) {
    await deleteTodo(todoId);
    await renderTodos();
    return;
  } else if (e.target.classList.contains('icon--checkbox')) {
    if (e.target.innerHTML === 'check_box') {
      e.target.innerHTML = 'check_box_outline_blank';
      e.target.closest('li').dataset.done = false;
      await editTodo(todoEl.id, todoElText.textContent, todoEl.dataset.done);
    } else {
      e.target.innerHTML = 'check_box';
      e.target.closest('li').dataset.done = true;
      await editTodo(todoEl.id, todoElText.textContent, todoEl.dataset.done);
    }
  }
});

• 트리순회 해야할 때 (Tree traversal)

// html
<div class="grandparent">
  <div class="parent">
    <div class="child"></div>
  </div>
</div>

//javascript
const child = document.querySelector('.child');
const grandparent = child.closest('.grandparent');

 

---

참조 

https://developer.mozilla.org/ko/docs/Web/API/Element/closest

ChatGPT