Javascript 移除 DOM 元素（如果存在）答案

【问题标题】：Javascript remove DOM element if existsJavascript 移除 DOM 元素（如果存在）
【发布时间】：2016-11-10 02:45:40
【问题描述】：

我有一个带有事件侦听器的按钮，当单击该事件侦听器时，它会将项目附加到 DOM。我想添加一个函数，在随后的按钮点击中清除那些附加的元素。

这是我尝试过的，但不断收到“div is undefined”。

function appendStuff(data) {
   for ( let i = 0; i < data.length; i++ ) {
    let body = document.querySelector('body');
    let div = document.createElement('div');
    let id = document.createElement('h1');
    div.appendChild(id)
    body.appendChild(div)
  }
};

button.addEventListener('click', (event) => {
  clearDOM(), appendStuff()
});

function clearDOM() {
if (div.document.body) {
let removeDiv = document.getElementsByTagName("div");
document.body.removeChild(removeDiv);
}
};

我想一种解决方法是在单击后禁用该按钮。

我认为这里的问题是第一次单击按钮时 DOM 中不会出现 div 元素。这似乎是引发错误的原因。希望 If 语句能解决这个问题。

【问题讨论】：

能分享一下append方法吗
什么是div.document.body？
@ArunPJohny 它正在测试 document.body 中是否有 div，不是吗？
getElementsByTagName 返回节点列表。您必须一一删除它们。
stackoverflow.com/questions/38576698/… 的副本。

标签： javascript dom

【解决方案1】：

删除所有div 元素可能不是最好的主意，而是尝试使用更具体的选择器，例如类。

在创建 div 时，向其中添加一个类，然后在 clear 方法中删除所有具有该类的 div

function appendStuff(data) {
  let body = document.querySelector('body');
  let ct = document.createDocumentFragment();
  for (let i = 0; i < data.length; i++) {
    let div = document.createElement('div');
    let id = document.createElement('h1');
    div.className = 'my-class';
    div.appendChild(id)
    ct.appendChild(div)
  }
  body.appendChild(ct)
};


button.addEventListener('click', (event) => {
  clearDOM(), appendStuff([{}, {}, {}, {}])
});

function clearDOM() {
  var divs = document.querySelectorAll('.my-class');
  Array.from(divs).forEach((div) => div.remove())

};

h1 {
  min-height: 20px;
  background-color: red;
}

&lt;button id="button"&gt;Add&lt;/button&gt;

【讨论】：

@torazaburo 你可以试试这个演示 :) developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove - 需要查看浏览器支持（仅在边缘） - 否则需要使用 div.parentNode.removeChild(div)

【解决方案2】：

您的代码有多个问题。

function clearDOM() {
  if (div.document.body) {
    let removeDiv = document.getElementsByTagName("div");
    document.body.removeChild(removeDiv);
  }
};

首先，正确缩进您的代码。此外，函数不需要终止分号。

无论如何，在上面，div.document.body 没有任何意义； div 是一个未定义的变量。你想检查什么？删除此if 条件。

其次，getElementsByTagName 返回一个节点列表，你不能直接removeChild 那样做。你必须循环：

let removeDivs = document.getElementsByTagName("div");
for (let i=0; i<removeDivs.length; i++) document.body.removeChild(removeDivs[i]);

虽然它不会影响代码的工作方式，但最好提前创建所有新元素并使用DocumentFragment 一次性插入它们。

function appendStuff(data) {
  let frag = document.createDocumentFragment();

  for ( let i = 0; i < data.length; i++ ) {
    let div = document.createElement('div');
    let id = document.createElement('h1');
    div.appendChild(id);
    frag.appendChild(div);
  }

  document.body.appendChild(frag);
}

顺便说一句，你不需要使用querySelector 来获取正文。它就在document.body 中。

【讨论】：