closest メソッドは、ある要素から親方向にたどって、指定したセレクタにマッチする最も近い祖先要素を取得します。イベント処理でとても重宝するメソッドです。
基本的な使い方
element.closest(selector) で、その要素自身も含めて親方向に探索します。
<div class="container"> <div class="box"> <button id="btn">クリック</button> </div> </div>
const btn = document.getElementById('btn'); // 親方向に .box を探す const box = btn.closest('.box'); console.log(box); // div.box // 親方向に .container を探す const container = btn.closest('.container'); console.log(container); // div.container
自分自身もチェック対象
closest は自分自身もチェックします。
const box = document.querySelector('.box'); const result = box.closest('.box'); console.log(result === box); // true（自分自身がマッチ）
見つからない場合
マッチする要素がなければ null が返ります。
const btn = document.getElementById('btn'); const table = btn.closest('table'); console.log(table); // null（親に table がない）
イベント委譲での活用
closest が最も活躍するのはイベント委譲のパターンです。
HTML
CSS
JavaScript
<ul id="list"> <li>項目1 <button class="delete">削除</button></li> <li>項目2 <button class="delete">削除</button></li> <li>項目3 <button class="delete">削除</button></li> </ul>
document.getElementById('list').addEventListener('click', function(e) { if (e.target.closest('.delete')) { const li = e.target.closest('li'); li.remove(); } });
クリックされた要素から closest で親の li を探し、それを削除しています。これにより、後から追加された要素にも自動的にイベントが適用されます。
closest と parentNode の違い
closest
CSS セレクタで探せる。自分自身も含む。見つからなければ null
parentNode
直接の親のみ取得。セレクタは使えない。常に1つ上の親だけ
特定の条件を満たす親要素を探すなら closest のほうが便利です。
