代码之家 › 专栏 › 技术社区 › nucky

父节点。removeChild未删除最后一个元素。但为什么呢?

javascript

nucky · 技术社区 · 7 年前

我正在编写一个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” 在HTMLanchoreElement。remove1(index.php:179)

我的代码哪里出了问题,我的想法哪里错了?

2 回复 | 直到 7 年前

Ayyappan Sekar 7 年前

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

deblist 用作2个元素的id,这是不可取的,因此 document.querySelectorAll('#deblist').length 返回2(我不确定您是否打算这样做)
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

Hiplobbe 7 年前

如果输入是组的一部分,则它们可以共享名称属性或类似的属性,而jQuery的使用可以帮助您执行以下操作。。。

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

或者如果不是团队的一部分,那么就。。。。

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

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前