【javascript】ボタンが押された要素の先祖要素を検索する方法

Question

今までjQueryを使っていたのですが、プレーンなjsで実装しています。
押された要素の親の親の要素を取りたいのですが方法がわかりません。

下記のような、同じ構成のグループ毎に同じ要素が複数あるhtmlがあるとします。
グループのノード内に、値をリセットするためのreset_buttonクラスのボタンがあり、
これを押すと、同じgroupクラス内のhidden_valueを削除します。

<div class="group">
   <a class="set_button" href="#" onclick="setValue()">値セット</a>
   <div class="sub_group">
      <p>値</p>
      <a class="reset_button" href="#" onclick="unsetValue(); return false;">値リセット</a> <!-- このボタンを押したらinputの値を削除-->
   </div>
   <input class="hidden_value" type="hidden">
</div>

<div class="group">
   <a class="set_button" href="#" onclick="setValue()">値セット</a>
   <div class="sub_group">
      <p>値</p>
      <a class="reset_button" href="#" onclick="unsetValue(); return false;"><値リセット</a>
   </div>
   <input class="hidden_value" type="hidden">
</div>

色々試してみたのですが親の親の取れなかったので、
直近の親を取ろうとしたのですが次のスクリプトを書いてみたのですが要素が取れませんでした。

function unsetValue() {
   // まず、直近の親を撮ってみたがundefined
   console.log(self.parentElemnt)
}

先祖の要素を検索して取得するにはどうしたら良いでしょうか？

Answer 1

parentElemntではありません。

【Node.parentNode - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Node/parentNode

【Element.closest() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Element/closest

Comments

[hasshy]

ありがとうございます。
解決できました。