gpt4 book ai didi

javascript - 如何找到父节点并删除子节点

转载 作者:行者123 更新时间:2023-11-30 16:42:07 24 4
gpt4 key购买 nike

我对 JavaScript 非常缺乏经验,在搜索和查看其他线程后,我很难弄清楚如何以类似于以下的方式从 Web 表单中动态删除字段我的用例(或者更有可能,我只是不明白!)。

我的理解是,如果没有对父节点的引用,则无法从 DOM 中删除元素。但是,我不完全确定在使用 removeChild() 时我应该在代码中引用什么作为父节点。我怀疑这是我的 HTML 中的东西;如果有人能指出我正确的方向,那就太好了。

<div>在 HTML 中 <body>

<div class="wrapper">
<div class="sidebar" text-align="center">
myFormFieldLabel <button onclick="myFunction()">add</button></p>
</div>
<div class="main" text-align="center">
<form name="myForm" action="/" method="POST">
some text goes here.
</br>
<hr>
</br>
<div class="fields" id="rf1">
<!--added form fields will appear here-->
</div></p>
</div>
<div class="submit">
<input type="submit" value="Submit" />
</form>
</div>
</div>

动态创建字段的 JavaScript:

function myFunction(){
var r = document.createElement('span');
var y = document.createElement("INPUT")
var p = document.createElement('p');
var g = document.createElement("IMG");
y.setAttribute("type", "text");
y.setAttribute("placeholder", "myFormField");
g.setAttribute("src", "delete.png");
g.setAttribute("onclick", //should remove entire form input field(span)//);
increment();
y.setAttribute("Name", "myField" + "~input_" + i);
r.appendChild(y);
r.appendChild(g);
r.appendChild(p);
document.getElementById("rf1").appendChild(r);
}

通常是我在此处调整代码时遇到的错误 Uncaught TypeError: Cannot read property 'removeChild' of null

最佳答案

要从您的文档中删除一个节点,您应该首先从您的 JavaScript 代码中给它一个 ID。这将使以后以编程方式删除变得容易得多。

例如:

var r = document.createElement("span");
r.id = "myID";
var y = document.createElement("INPUT")
var p = document.createElement('p');
var g = document.createElement("IMG");
...
// Later
var p = document.getElementById("myID");
p.parentNode.removeChild(p);

关于javascript - 如何找到父节点并删除子节点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31799216/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com