【jQuery】closest()で最も近い親要素を取得する完全ガイド｜parents・parent・DOM走査の使い分けまで

jQueryの closest() は、ある要素から上に向かってDOM階層を走査し、セレクターに一致する最も近い祖先要素（または自分自身）を取得します。イベントデリゲーションや削除ボタンの実装で頻繁に使われる重要なメソッドです。この記事ではclosest・parent・parents・parentsUntilの違いと実用パターンまで解説します。

parent / parents / closest の違い

実務ではほとんどの場合 closest() が最適です。HTML構造が変わっても最初にマッチした祖先を返すため、堅牢なコードになります。

closest() の基本的な使い方

<ul id="todo-list">
  <li class="todo-item">
    <span class="todo-text">タスク1</span>
    <button class="delete-btn">削除</button>
  </li>
</ul>

$(function () {
  // 削除ボタンから最も近い li 要素を取得して削除
  $(document).on('click', '.delete-btn', function () {
    var $item = $(this).closest('.todo-item');
    console.log('削除対象:', $item.find('.todo-text').text());
    $item.remove();
  });

  // closest() は自分自身も対象になる
  // → ボタン自身が .delete-btn なら $(this).closest('.delete-btn') は自分を返す
  console.log('自分自身:', $('.delete-btn').closest('.delete-btn').length); // 1
});

フォームのエラー表示と組み合わせる

<div class="form-group">
  <label>メールアドレス</label>
  <input type="email" class="form-control" name="email">
  <p class="error-msg" style="display:none; color:red"></p>
</div>

$(function () {
  // 入力欄からフォームグループを辿ってエラーメッセージを表示
  function showError($input, message) {
    $input.closest('.form-group')
      .find('.error-msg')
      .text(message)
      .show();
    $input.addClass('is-invalid');
  }

  function clearError($input) {
    $input.closest('.form-group')
      .find('.error-msg')
      .hide();
    $input.removeClass('is-invalid');
  }

  $('input').on('blur', function () {
    if ($(this).val() === '') {
      showError($(this), '必須入力です');
    } else {
      clearError($(this));
    }
  });
});

parents() と parentsUntil() の使い方

$(function () {
  // 全ての祖先要素を取得（遠い順）
  var $ancestors = $('#target').parents();
  console.log('祖先の数:', $ancestors.length);

  // セレクター付きで祖先をフィルタリング
  var $sections = $('#target').parents('section');
  console.log('section祖先:', $sections.length);

  // parentsUntil: 指定要素の手前まで全祖先を取得
  // #container の手前まで（#container 自身は含まない）
  var $between = $('#target').parentsUntil('#container');
  $between.addClass('highlight'); // 中間の祖先要素をハイライト
});

実用的なパターン集

$(function () {
  // テーブル行のデータ取得（ボタンが複数列ある場合）
  $(document).on('click', '.edit-btn', function () {
    var $row  = $(this).closest('tr');
    var id    = $row.data('id');
    var name  = $row.find('.name-col').text();
    console.log('編集:', id, name);
  });

  // アコーディオンの開閉（クリックされた見出しから親パネルを辿る）
  $(document).on('click', '.accordion-header', function () {
    var $panel = $(this).closest('.accordion-item');
    $panel.toggleClass('is-open');
    $panel.find('.accordion-body').slideToggle();
  });

  // ドロップダウンの外側クリックで閉じる
  $(document).on('click', function (e) {
    // クリックが .dropdown の内側でなければ閉じる
    if ($(e.target).closest('.dropdown').length === 0) {
      $('.dropdown').removeClass('is-open');
    }
  });
});

まとめ

jQueryで祖先要素を取得する際のポイントをまとめます。

• closest(sel): 最も近い祖先（自分自身も含む）→ 実務でほぼこれ
• parent(): 1つ上の親のみ
• parents(sel): 全祖先（セレクターでフィルタ可能）
• 定番パターン: closest(".group").find(".target")

関連記事: 要素を削除する完全ガイド / 要素を別の要素に置き換える方法

よくある質問（FAQ）