纯 JavaScript：单击子元素时删除元素答案

【问题标题】：Pure JavaScript: Remove Element when it's child is clicked纯 JavaScript：单击子元素时删除元素
【发布时间】：2018-06-28 20:03:33
【问题描述】：

我有：

<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);

是最好、最有效的解决方案

【问题讨论】：

你需要传递一个回调函数，而不是调用函数
您正在调用该方法，它返回的内容被分配给事件监听器。

标签： javascript html css dom-events

【解决方案1】：

这是一个很好的事件委托用例。由于 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'>&times;</span></li>
    <li>2<span class='remove'>&times;</span></li>
    <li>3<span class='remove'>&times;</span></li>
    <li>4<span class='remove'>&times;</span></li>
    <li>5<span class='remove'>&times;</span></li>
    <li>6<span class='remove'>&times;</span></li>
    <li>7<span class='remove'>&times;</span></li>
    <li>8<span class='remove'>&times;</span></li>
    
  </ul>

关于事件委托的一些资源： https://gomakethings.com/why-event-delegation-is-a-better-way-to-listen-for-events-in-vanilla-js/

https://davidwalsh.name/event-delegate

【讨论】：