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

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

未捕获的TypeError：无法读取未定义的属性“removeChild” 在HTMLAnchorElement.remove1（index.php：179）

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

Answer 1

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

deblist用作2个元素的ID，这是不可取的，由于此document.querySelectorAll('#deblist').length返回2（我不确定您是否打算这样做）
< / LI>
document.getElementsByName()（检查here）将返回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]);

检查小提琴here

Answer 2

如果输入是组的一部分，他们可以共享名称属性等，并且使用jQuery可以帮助你做类似的事情......

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

或者如果不是小组的一部分，那么......

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

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

2 个答案: