纯JavaScript:单击子元素时移除元素
纯JavaScript:单击子元素时移除元素
提问于 2018-06-29 04:03:34
我有：
<ul id="list">
<li>Some text <span class="removeParent">X</span></li>
</ul>当点击span.removeParent时，li必须被删除。
这很简单，但我想出的唯一(不幸的是有效的)解决方案是：
span.addEventListener("click", this.parentElement.parentElement.removeChild(this.parentElement);它可能脱离了上下文，所以这里有完整的待办事项应用程序的链接：https://jsfiddle.net/w246hn3b/3/
我不确定是否
this.parentElement.parentElement.removeChild(this.parentElement);是最好、最有效的解决方案。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-29 04:10:15
这是事件委托的一个很好的用例。由于click事件将从DOM向上冒泡到父节点，因此您可以侦听根祖先上的click事件，然后检查单击的元素是否与您的目标类型匹配。
var todolist = document.getElementById('todolist');
todolist.addEventListener('click', function(e){
if(e.target.matches('.remove')){
todolist.removeChild(e.target.parentNode);
}
});.remove {
color: #821818;
display: inline-block;
padding: 3px 10px;
border: 1px solid #d84c4c;
border-radius: 2px;
cursor: pointer;
position: absolute;
right: 0px;
top: 0px;
height: 100%;
box-sizing: border-box;
background: #f1bbc0;
font-weight: 700;
font-size: 25px;
}
#todolist{
list-style:none;
}
#todolist li{
display:block;
position:relative;
padding:8px 6px;
width:300px;
margin:5px 0px;
border-radius:2px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12), 0 3px 3px -2px rgba(0, 0, 0, 0.4);
}<ul id='todolist'>
<li>1<span class='remove'>×</span></li>
<li>2<span class='remove'>×</span></li>
<li>3<span class='remove'>×</span></li>
<li>4<span class='remove'>×</span></li>
<li>5<span class='remove'>×</span></li>
<li>6<span class='remove'>×</span></li>
<li>7<span class='remove'>×</span></li>
<li>8<span class='remove'>×</span></li>
</ul>
有关事件委托的一些资源：https://gomakethings.com/why-event-delegation-is-a-better-way-to-listen-for-events-in-vanilla-js/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51090478
复制相关文章
相似问题