Чистый JavaScript: удаление элемента при нажатии на его дочерний элемент

Question

Итак, у меня есть:

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

является лучшим, наиболее эффективным решением

Answer 1

Это отличный пример использования для делегирования событий. Поскольку событие click приведет к появлению DOM на родительском узле, вы можете прослушать событие click у корневого предка, а затем проверить, соответствует ли элемент clicked вашему целевому типу.

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