删除 Div [JavaScript] 中的最后一个元素

Question

我遇到了一个奇怪的问题。我正在尝试制作一个程序，该程序将在另一个名为 "body" 的 div 中添加和删除 div。要添加 divs，我使用 document.getElementById("body").innerHTML。添加工作正常。但是，在删除函数中，我将 "body" id 替换为具有将被删除的 div 的 id 的变量。但是当我运行代码时，我得到错误 "cannot set innerHTML of null"。我试图用一个固定的局部变量替换 id 变量，它工作正常。我还尝试向变量添加引号，但这也没有用。有什么理由不能将 id 设置为不断变化的变量吗？谢谢。

这是我的代码：

var i = 1;

function myFunction() {
  var addDiv = document.getElementById("body2");
  addDiv.innerHTML += "<div id = '" + i + "'><br><textarea id = '1' > foo < /textarea></div > ";
  i++;
}

function myFunction2() {
  var deleteDiv = document.getElementById(i);
  deleteDiv.innerHTML = "";
  i--;
}

<div id="body2">
  <div id="0">
    <textarea id="text">lol</textarea><button onclick="myFunction()">Add</button>
    <button onclick="myFunction2()">Delete</button>
  </div>
</div>

Answer 1

您在添加 div 后递增 i，因此您必须在删除时使用 i-1 以获得正确的 ID。

var i = 1;

function myFunction() {
var addDiv = document.getElementById("body2");
addDiv.innerHTML += "<div id = '"+i+"'><br><textarea id = '1'>foo</textarea></div>";
i++;
}

function myFunction2() {
var deleteDiv = document.getElementById(i-1);
deleteDiv.remove();
i--;
}

<div id = "body2">
<div id = "0">
   <textarea id = "text">lol</textarea><button onclick = 
   "myFunction()">Add</button>
    <button onclick = "myFunction2()">Delete</button>
</div>
</div>

Answer 2

要删除最后一个子项，您甚至可以使用 CSS 选择器 last-child。您还应该将特定的 class 添加到新添加的 div，因为您只想删除新添加的 divs.

这也将删除 i 的依赖关系。

作为插件，你也可以使用document.createElement + Node.appendChild代替设置innerHTML。 .innerHTMl 对于高度嵌套的结构来说会很昂贵。

function myFunction() {
  document.getElementById("body2").appendChild(getDiv());
}

function getDiv(i){
  var div = document.createElement('div');
  div.classList.add('inner')
  var ta = document.createElement('textarea');
  ta.textContent = 'foo';
  div.appendChild(ta);
  return div;
}

function myFunction2() {
  var div = document.querySelector('#body2 div.inner:last-child')
  div && div.remove()
}

<div id="body2">
  <div id="0">
    <textarea id="text">lol</textarea><button onclick="myFunction()">Add</button>
    <button onclick="myFunction2()">Delete</button>
  </div>
</div>

您可以参考"innerHTML += ..." vs "appendChild(txtNode)"了解更多信息。

删除 Div [JavaScript] 中的最后一个元素

Deleting the last Element in a Div [JavaScript]

html

javascript

dom

global-variables

getelementbyid