[英]Delete child element of a div onclick?
我拥有的
我的父 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”它应该被删除，即我点击它的文本（单词）应该被删除。
帮我
使用 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>
另一种方法是使用 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>
问题未解决？试试以下方法：
如何仅在子 div 元素中而不在父 div 中触发 onclick 事件？
[英]How to trigger onclick event only in the child div element but not in the parent div?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.