Question

我有一个奇怪的问题。我试图制作一个程序，在另一个名为＆＃34; body＆＃34;的div中添加和删除div。要添加div，我使用document.getElementById("body").innerHTML。添加工作正常。但是，在删除功能中，我更换了＆＃34; body＆＃34;带有将被删除的div的id的变量的id。但是当我运行代码时，我得到错误＆＃34;无法设置null的＆lt; 34;的innerHTML。我试图用固定的局部变量替换id变量，它工作正常。我也尝试在变量中添加引号，但这也没有用。我有什么理由不能将id设置为变化的变量吗？感谢。

这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

这也将删除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]

2 个答案: