从循环中生成的 DOM 中删除先前的元素答案

【问题标题】：Remove previous elements from DOM that are generated inside a loop从循环中生成的 DOM 中删除先前的元素
【发布时间】：2021-11-01 04:27:02
【问题描述】：

您好，在下面的代码中，我如何从 DOM 中删除前一个元素并用新元素替换它。每次我按下按钮时都应该这样做。目前，每次我按下按钮时，它都会不断向 DOM 添加新元素。

let arr = [
  {name: 'John', age: 31},
  {name: 'Eric', age: 55},
  {name: 'Kyle', age: 80},
  {name: 'Pedro', age: 44},
  {name: 'Ali', age: 35},
];

let btn = document.querySelector('button');

btn.addEventListener('click', () => {
arr.map(info => {
  let p = document.createElement('p');
  let container = document.querySelector('.container');

  if(p === undefined){
    p.remove();
  }

  p.append(info.name);
  container.append(p);
})
})

【问题讨论】：

p === undefined 永远不会是真的。不确定您在哪里检查“上一个元素”。您可以使用replaceChildren 替换container 的所有内容。这是您需要的还是您需要现有元素的其他子集？
您应该在您的问题中添加minimal reproducible example。
你误用了map。如果您不使用map 生成的值，请使用forEach。见JavaScript: Difference between .forEach() and .map()。
这能回答你的问题吗？ Remove all child elements of a DOM node in JavaScript
您是否只是在问如何在单击按钮时遍历数组并用下一个条目替换每个条目。因为目前您正在添加所有。

标签： javascript loops dom

【解决方案1】：

点击按钮后需要删除容器内的previos Html。

btn.addEventListener('click', () => {
   document.querySelector('.container').innerHTML = ''
// Your logic here
})

【讨论】：

【解决方案2】：

您可以删除容器中的所有内容，方法是将它的 innerHTML 设为空。

const arr = [
  {name: 'John', age: 31},
  {name: 'Eric', age: 55},
  {name: 'Kyle', age: 80},
  {name: 'Pedro', age: 44},
  {name: 'Ali', age: 35},
];

let changes = 0;
const btn = document.getElementById('add');
btn.addEventListener('click', () => {
  const container = document.getElementById('container');
  container.innerHTML = '';
  
  arr.map(item => {
    const p = document.createElement('p');
    p.innerHTML = item.name;
    container.append(p);
  });
  
  changes++;
  btn.innerHTML = `Change element (${changes})`;
})

<div id="container">
  <p>Test element</p>
</div>
<button id="add">Change element</button>

【讨论】：

【解决方案3】：

A closure 可以管理数组的当前索引。如果您从处理函数返回该闭包，那么这是从单击侦听器调用的函数，然后您可以单击按钮，知道将返回下一个对象名称。

您不必创建新元素 - 您只需替换现有元素的文本内容即可。

const arr = [
  {name: 'John', age: 31},
  {name: 'Eric', age: 55},
  {name: 'Kyle', age: 80},
  {name: 'Pedro', age: 44},
  {name: 'Ali', age: 35},
];

const container = document.querySelector('.container');
const btn = document.querySelector('button');

btn.addEventListener('click', handler(arr), false);

function handler(arr) {
  let index = 0;
  return function () {
    if (index < arr.length) {
      container.textContent = arr[index].name;
      ++index;
    }
  }
}

<div class="container"></div>
<button>Click</button>

【讨论】：