刪除 div onclick 的子元素？

Question

我擁有的

我的父 div 為 class = "alphabets" 並且子 div 都具有相同的 class = "word"

<div class="alphabets">
  <div class="word"> abc </div>
  <div class="word"> def </div>
  <div class="word"> ghi </div>
  <div class="word"> jkl </div>
  <div class="word"> mno </div>
</div>

當我點擊“abc”時我需要什么它應該被刪除，如果點擊“jkl”它應該被刪除，即我點擊它的文本（單詞）應該被刪除。

幫我

Answer 1

使用 event.target 屬性來確定單擊了哪個子元素。 一旦知道單擊了哪個元素，就可以使用 remove() 方法

 const alphabets = document.querySelector('.alphabets'); alphabets.addEventListener('click', (event) => { if (event.target.classList.contains('word')) { event.target.remove(); } });

 <div class="alphabets"> <div class="word"> abc </div> <div class="word"> def </div> <div class="word"> ghi </div> <div class="word"> jkl </div> <div class="word"> mno </div> </div>

Answer 2

另一種方法是使用 jQuery 庫，它提供了一種使用 DOM 的簡單方法。

 $('.word').click(function(){ $(this).remove(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="alphabets"> <div class="word"> abc </div> <div class="word"> def </div> <div class="word"> ghi </div> <div class="word"> jkl </div> <div class="word"> mno </div> </div>