素のJavascriptで一覧の要素から、クリックした要素を消す

非jQueryで一覧の要素から、クリックした要素を消す方法のメモ。


実際のコード

<!--HTML-->
  <div class="item_box">
    <p>Die katze ist sehr schön.</p>
    <div class="item">x</div>
  </div>
  <div class="item_box">
    <p>Die Eule ist sehr schön.</p>
    <div class="item">x</div>
  </div>
  <div class="item_box">
    <p>Der Hunt ist sehr schön.</p>
    <div class="item">x</div>
  </div>
// JS
const target_item_name = '.item';// このclass名をクリックすると消す
const target_item_wrap_name = '.item_box';// 消したい一覧のclass名

// 消す処理
document.querySelectorAll(target_item_name).forEach((element) =>{
  element.addEventListener('click', (event) => {
    // クリックした要素の親要素を削除
    event.target.closest(target_item_wrap_name).remove();
  });
});
// jQuery
$(function(){
  $('.item').click(function(){
    $(this).parent().remove();
  });
});

memo

jQueryばかりを使う案件に振り回される中、突如降りかかるVue.js案件。
己の実力を過信しすぎた技術者に待ち受けるのは、幾多のUndefined地獄であった。
一つ、また一つと、問題を解決していく彼らに待ち受けるのは、希望か、破滅か。

次回、React案件。

フロントエンドの終端は、誰もピリオドを打たない。

この記事を書いた人

CORUN

「たぶん、できるんじゃないかな。」
それがコンセプトであり、なりたい自分の一人。
Webのお仕事やっております。