parentNode.removeChild 不删除最后一个元素.但是为什么

Question

我正在研究一个javascript代码，我可以克隆一个元素，但也想在单击时删除一个。克隆有效，但我无法删除一个。

我有以下要素。

<input list="accountsdeb" name="deblist[1]" id="deblist" autocomplete="off">
<input list="accountsdeb" name="deblist[2]" id="deblist" autocomplete="off">

现在我想在单击时删除最后一个(最后一个 = 最高数字(。

function remove1() {
  var dbl = document.querySelectorAll('#deblist').length;
  var dbla = dbl;
  var elem = document.getElementsByName("deblist["+dbla+"]");
  alert(dbla);
  //var last = debelelast - 1;
  elem.parentNode.removeChild(elem);
}

作为一个方向，我曾经看过W3S和Stack的例子。我也看到这是有效的：

var elem = document.getElementById("myDiv");
elem.parentNode.removeChild(elem);

但这是随机的，正如你所看到的，我试图在我的代码中包含它。我得到的错误是：

未

捕获的类型错误：无法读取未定义的属性"removeChild" at HTMLAnchorElement.remove1 (index.php：179(

我的代码中的问题在哪里，我的想法在哪里错误？

Answer 1

我在您提供的代码段中看到两个问题，

1. deblist 用作 2 个元素的 id，这是不可取的，因此document.querySelectorAll('#deblist').length返回 2(我不确定您是否打算这样做(

2. document.getElementsByName()(检查这里(将返回一个 NodeList，需要迭代才能访问任何返回的元素。所以在这里你需要通过给出它的索引来选择子元素。在您的情况下elem将有一个用于匹配名称deblist[2]的元素，因此您需要像elem[0]一样访问它以选择其父级并删除其子级。

所以更新的代码将是，

var dbl = document.querySelectorAll('#deblist').length;
var dbla = dbl;
// console.log('dbla', dbla);
var elem = document.getElementsByName("deblist["+dbla+"]");
// console.log('elem 0', elem[0]);
// console.log('elem parentNode', elem[0].parentNode);
//var last = debelelast - 1;
elem[0].parentNode.removeChild(elem[0]);

在这里检查小提琴

Answer 2

如果输入是组的一部分，它们可以共享名称属性等，并且使用 jQuery 可以帮助您执行以下操作...

$("input[name='group1']").last().parent().remove()

或者如果不是团体的一部分，那么只是....

$("input").last().parent().remove()