Question

我的代码遇到了一些麻烦。我唯一要做的就是添加和删除按钮。添加部分已经完成，但删除部分没有。它一直在说：

未捕获类型错误：无法在“节点”上执行“removeChild”：参数1不是“节点”类型

有人可以帮帮我吗？

谢谢！

代码：

<input type="text" id="txtelement">
<button id="add">result</button>
<button id="delete">Delete latest</button>

<p id="divResult"></p>

<script>
//decline variable
var index = 1;

//adding option
window.onload = function(){
document.getElementById('add').onclick = function(){
var newElement = document.createElement('div');
varElementid = 'div' + index++;

var node = document.getElementById('txtelement').value;
var newNode = document.createTextNode(node);

newElement.appendChild(newNode);

console.log(newElement);
document.getElementById('divResult').appendChild(newElement);
}

//delete option
document.getElementById('delete').onclick = function(){
var divResult = document.getElementById('divResult');
var alinea = divResult.querySelectorAll('p:last-child')[0];
console.log(alinea + ' word verwijderd...');

divResult.removeChild(alinea);
console.log('verwijderd!');

}
}

Answer 1

:last-child的工作方式与您认为的略有不同。 p:last-child选择[em> p（aragraph）类型的最后一个子节点[你调用方法的任何父节点]'。您不想选择p，而是想要选择刚刚插入的div。

var alinea = divResult.querySelectorAll('div:last-child')[0]

请注意，您删除的元素多于您添加的元素，但您的代码仍然无法处理。

正在运行代码段：

//decline variable
var index = 1;

//adding option
window.onload = function() {
  document.getElementById('add').onclick = function() {
    var newElement = document.createElement('div');
    varElementid = 'div' + index++;

    var node = document.getElementById('txtelement').value;
    var newNode = document.createTextNode(node);

    newElement.appendChild(newNode);

    console.log(newElement);
    document.getElementById('divResult').appendChild(newElement);
  }

  //delete option
  document.getElementById('delete').onclick = function() {
    var divResult = document.getElementById('divResult');
    var alinea = divResult.querySelectorAll('div:last-child')[0];
    console.log(alinea + ' word verwijderd...');

    divResult.removeChild(alinea);
    console.log('verwijderd!');

  }
}

<input type="text" id="txtelement">
<button id="add">result</button>
<button id="delete">Delete latest</button>

<p id="divResult"></p>

使用removeChild（）添加和删除脚本不起作用

1 个答案: