JavaScript ~クリックした要素を取り出す方法~

はじめに

同一のタグ（liなど…）、をクリックした要素だけ取得したい時の方法を、意外とわかっていなかったので、備忘録として記載します。

実行例

実行例をみてみます。
イメージとしては、

ここで'要素3'の削除ボタンをクリックすると、

'要素3'のみが削除されました。同一タグでもクリックされたところのみ削除されています。

ざっくりhtmlコードを記載します。

<ul>
     <li>要素1</li>
     <li>要素2</li>
     <li>要素3</li>
     <li>要素4</li>
     <li>要素5</li>
</ul>

JavaScriptでの処理

例えば、'要素3'の削除ボタンをクリックした時に要素3を消すという処理を行いたい場合、単純に考えるとこう書くこともできます。

var li = document.getElementsByTagName('li');
li[2].addEventListener('click', function() {
      li[2].remove();
});

しかし、この場合だと、'要素3'を削除することしかできず、汎用性がありません。

なので、複数の要素数を取得するfor文を使います。

var li = document.getElementsByTagName('li');
for (var i=0; i < li.length; i++) {
     li[i].addEventListener('click', function() {
            // thisはli[i]にあたる
            this.remove();
});
};

と書くことで、クリックした要素のみを削除することが可能です。