主页 / 问题 / 1062039
Accepted
Кевин
Asked:2020-12-23 06:07:07 +0000 UTC2020-12-23 06:07:07 +0000 UTC

如何从 NodeList 中正确删除元素？

  • 772

我NodeList在页面上显示了哪些元素：

elements = document.querySelectorAll('.element');

当我点击第一个元素时，elements我需要删除它并将另一个元素添加NodeList到 end elements。

进行上述操作的最佳方法是什么？

javascript

1 个回答

  1. Best Answer

    具体来说，不能从 NodeList 中删除元素。您可以从中制作一个数组并使用该数组。像这样的东西：

    let elements = Array.from( document.querySelectorAll('.element') );
let other = document.querySelectorAll('.other');
let i = 0;

nodeListDemo(elements);

elements[0].onclick = bubu;

function bubu(){
  this.onclick = null;
  this.classList.remove('nodeList'); // удалил демо-класс с кликнутого элемента

  elements.shift();                  // удалил первый элемент из elements
  elements.push( other[i++] );       // добавил другой элемент с конца
  
  nodeListDemo(elements);            // всё, что стало зеленым - принадлежит elements
  elements[0].onclick = bubu;        // первый элемент уже другой - обработчик на него.
}

function nodeListDemo(elems){
  elems.forEach( e => e.classList.add('nodeList') );
}
    .element, .other {
  width: 50px;
  height: 50px;
  margin: 5px;
  display: inline-block;
  background-color: orange;
}

.other { background-color: #f36700; }

.nodeList {
  background-color: green;
}
    <div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<hr>
<div class="other"></div>
<div class="other"></div>
<div class="other"></div>
<div class="other"></div>
<div class="other"></div>

    但在这种形式下，任务看起来太做作了。在问题中添加任务上下文不会有什么坏处。

    • 3

相关问题