Question

我有一个带有事件监听器的按钮，可以在单击时将项目附加到DOM。我想添加一个函数，在后续按钮点击时清除那些附加元素。

这是我尝试过的，但不断得到“div未定义”。

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语句可以解决这个问题。

Answer 1

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

创建div时，在其中添加一个类，并在clear方法中删除所有具有类

的div

＆＃13;

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())

};

＆＃13;

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

＆＃13;

<button id="button">Add</button>

＆＃13;

Answer 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。

Javascript删除DOM元素（如果存在）

2 个答案: