Проблема с удалением дочерних элементов DIV, на которые нацелен EventListener - PullRequest
1 голос
/ 23 сентября 2019

У меня есть группа <span> в пределах <div>, которую я хочу удалить при нажатии.Но JavaScript не работает так, как задумано.

Я также разработал мой div для нас в виде сетки, которую я не подозреваю в качестве виновника.

HTML:

<div class="collage">
<span class="col01">1</span>
<span class="col02">2</span>
<span class="col03">3</span>
<span class="col04">4</span>

JavaScript:

var init2 = function () {
    document.querySelectorAll('.span[class^="col"]').addEventListener('click', spanRemover, false)
    var spans = document.querySelectorAll('.collage span')
    function spanRemover (e) {
    for (var i = 0; i < spans.length; i++) {
      if (e.target === spans[i]) {
        spans[i].remove()
      }
    }
  }
}
window.addEventListener('DOMContentLoaded', init2, false)

Ответы [ 3 ]

0 голосов
/ 23 сентября 2019

У вас есть несколько вещей, которые вы можете изменить:

  1. document.querySelectorAll('.span[class^="col"]') вернет NodeList , который представляет собой список элементов / узлов, соответствующих вашему запросу.Итак, вам нужно перебрать эту коллекцию и добавить прослушиватель событий для каждого узла в коллекции.

  2. span - это не класс, это элемент.В результате этого нет необходимости использовать . в качестве префикса при нацеливании на него с document.querySelectorAll()

  3. Нет необходимости перебирать все ваши пролеты, чтобы увидетькакой из них был нажатАргумент e (объект, который дает вам информацию о событии) дает вам эту информацию, выполнив e.target.Затем вы можете удалить это, используя e.target.remove();

См. Пример ниже:

function spanRemover(e) {
  e.target.remove();
}

var init2 = function() {
  document.querySelectorAll('span[class^="col"]').forEach(elem => {
    addEventListener('click', spanRemover, false);
  });
}
window.addEventListener('DOMContentLoaded', init2, false)
<div class="collage">
  <span class="col01">1</span>
  <span class="col02">2</span>
  <span class="col03">3</span>
  <span class="col04">4</span>
</div>
0 голосов
/ 23 сентября 2019

var init2 = function() {
  document.querySelectorAll('.collage span').forEach(function(element) {
    element.addEventListener('click', function() {
      this.remove();
    });
  })
}
window.addEventListener('DOMContentLoaded', init2, false)
<div class="collage">
  <span class="col01">1</span>
  <span class="col02">2</span>
  <span class="col03">3</span>
  <span class="col04">4</span
</div>
0 голосов
/ 23 сентября 2019

Основная проблема с вашим кодом: вы используете «span» в качестве класса в querySelectorAll selecor, поэтому ни один из ваших диапазонов не получит этот обработчик кликов.

См. Исправленную рабочую версию

window.addEventListener(
  'DOMContentLoaded',
  () => {
    document.querySelectorAll('.collage span').forEach((node) => {
      node.addEventListener('click', (e) => {
        e.target.remove()
      }, false)
    });
  },
  false
);
<div class="collage">
  <span class="col01">1</span>
  <span class="col02">2</span>
  <span class="col03">3</span>
  <span class="col04">4</span>
</div>
...