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

У меня есть:

<ul id = "list">
  <li>Some text <span class = "removeParent">X</span></li>
</ul>

И когда щелкают span.removeParent, его нужно удалить.

Это очень просто, но единственное (к сожалению, работающее) решение, которое я придумал, было:

span.addEventListener("click", this.parentElement.parentElement.removeChild(this.parentElement);

Это может быть вне контекста, поэтому вот ссылка на полную версию приложения: https://jsfiddle.net/w246hn3b/3/

Я не уверен, что

this.parentElement.parentElement.removeChild(this.parentElement);

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

вам нужно передать функцию обратного вызова, а не вызывать функцию

— 28.06.2018 22:08

Вы вызываете метод, и то, что он возвращает, назначается прослушивателю событий.

— 28.06.2018 22:10

javascript html css dom-events

28.06.2018 22:03

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 134

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

28.06.2018 22:10