Terms Privacy

© Rollpie

JavaScript
16 Jan 2026

closest で親要素を探す

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 のほうが便利です。

7 views