js remove() удаляет сначала элементы внутри, а потом уже сам элемент, который нужно удалить по нажатию кнопки

Question

Есть контейнер, внутри него него 3 блока(итема), внутри каждого блока есть кнопка, по нажатию которой срабатывает функция, которая должна удалить именно сам элемент, а она удаляет сначала внутренности этого блока, будь то кнопка по которой кликаешь или текст, а уже потом сам элемент. Как сделать чтобы удалялся только элемент?

function f1() {
  elem = document.querySelector(".container");

  elem.addEventListener("click", event => {
    let el = event.target;
    el.remove()
  })
}

.block {
  background-color: blue;
  color: black;
  width: 200px;
  height: 50px;
  margin: 5px;
}

.del {
  color: white;
  font-size: 32px;
}

<div class="container">
  <div class="block">
    <span>1</span> <span class="del" onclick="f1()">del</span>
  </div>
  <br>
  <div class="block">
    <span>2</span> <span class="del" onclick="f1()">del</span>
  </div>
  <br>
  <div class="block">
    <span>3</span> <span class="del" onclick="f1()">del</span>
  </div>
</div>

Answer 1

Это нужно?

document.querySelectorAll('.del').forEach(item => {
  item.addEventListener('click', event => {      
      item.parentNode.remove()
  })
})

.block {
  background-color: #a3b7c7;
  color: black;
  width: 200px;
  height: 50px;
  margin: 5px;
}

.del {
  color: white;
  font-size: 32px;
}

<div class="container">
  <div class="block">
    <span>1</span> <span class="del">del</span>
  </div>
  <br>
  <div class="block">
    <span>2</span> <span class="del">del</span>
  </div>
  <br>
  <div class="block">
    <span>3</span> <span class="del">del</span>
  </div>
</div>

БЛОГ НА HUSL

js remove() удаляет сначала элементы внутри, а потом уже сам элемент, который нужно удалить по нажатию кнопки

Ответы (1 шт):