如何在 JavaScript 中删除创建的元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16707751/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to delete a created element in JavaScript?
提问by Neon Warge
Hello I have a piece of code that allows me to add an author. I have a problem, I can't seem to delete the created node in my table This is the worst frustration in my life. I could not seem to delete it. I also have notice that every time I inspected the element I could not see the new created element from the source. But when I view it on firebug I can actually see it there.
您好，我有一段代码可以让我添加作者。我有一个问题，我似乎无法删除我表中创建的节点这是我一生中最糟糕的挫折。我似乎无法删除它。我还注意到，每次检查元素时，我都无法从源中看到新创建的元素。但是当我在萤火虫上查看它时，我实际上可以在那里看到它。
Adding an input element and appending it on the table works fine for me.
添加输入元素并将其附加到表格上对我来说效果很好。
I am just very new to JavaScript and to this web thingy and deleting a CREATED ELEMENT via .createElement is where I am stuck at.
我对 JavaScript 和这个网络事物很陌生，通过 .createElement 删除 CREATED ELEMENT 是我遇到的问题。
here is my code
这是我的代码
<script>
var ctr = 1;
function showTextBox()
{
// is the table row I wanted to add the element before
var target = document.getElementById('bef');
var tblr = document.createElement('tr');
var tbld1 = document.createElement('td');
var tbld2 = document.createElement('td');
var tblin = document.createElement('input');
tblin.name = 'Author' + ctr;
tblin.id = 'Author' + ctr;
tblin.placeholder = 'add another author';
tbld1.appendChild( document.createTextNode('Author' + ctr ) );
tbld2.appendChild( tblin );
tblr.appendChild( tbld1 );
tblr.appendChild( tbld2 );
target.parentNode.insertBefore( tblr , target );
ctr++;
}
function hideTextBox()
{
var name = 'Author'+ctr;
var pTarget = document.getElementById('tbhold');
var cTarget = document.getElementById( name );
alert( cTarget ); // this one return null? Why? I have created id="Author1"
// viewing this code on source make the created elem to not appear
}
</script>
Am I doing something wrong? I really need help. This is for my project at school. Is there any way I could delete it. I created that node and I want it to be deleted when I click something.
难道我做错了什么？我真的需要帮助。这是我在学校的项目。有什么办法可以删除它。我创建了该节点，并希望在单击某些内容时将其删除。
Also I prefer to stay with JS not with JQuery or other JStuff and I am disregarding compatibility for now because this is just a sample in my dummy form. I will deal on that later.
此外，我更喜欢使用 JS 而不是 JQuery 或其他 JStuff，我现在不考虑兼容性，因为这只是我的虚拟表单中的一个示例。我稍后会处理。
EDIT In case you need the actual form here it is
编辑如果你需要这里的实际表格
<form enctype="multipart/form-data" action="process/" method="POST" />
<h3>Book Upload</h3>
<table border="2" id='tbhold'>
<tr>
<td>Title</td>
<td><input type="text" id="book_title" name="book_title" /></td>
</tr>
<tr>
<td>Author</td>
<td><input type="text" id="book_author" name="book_author" /></td>
</tr>
<tr id="bef">
<td colspan="2">
<a href="javascript:showTextBox()">add author</a>
<a href="javascript:hideTextBox()">remove</a>
</td>
</tr>
</table>
</form>
Thank you very much!
非常感谢你！
采纳答案by Sudarshan
回答by elclanrs
Try this function:
试试这个功能：
function removeElements(elements){
for(var i = 0; i < elements.length; i++){
elements[i].parentNode.removeChild(elements[i]);
}
}
Then you can do this:
然后你可以这样做：
removeElements(document.querySelectorAll('#tbhold tr'));
回答by Bergi
every time I inspected the element I could not see the new created element from the source. But when I view it on firebug I can actually see it there.
每次我检查元素时，我都看不到源中新创建的元素。但是当我在萤火虫上查看它时，我实际上可以在那里看到它。
If you change the DOM, you of course do not change the HTML source markup. Only the DOM inspector will show you the changes.
如果您更改 DOM，您当然不会更改 HTML 源标记。只有 DOM 检查器会显示更改。
var name = 'Author'+ctr; var cTarget = document.getElementById( name ); alert( cTarget ); // this one return null? Why? I have created id="Author1"
var name = 'Author'+ctr; var cTarget = document.getElementById( name ); alert( cTarget ); // this one return null? Why? I have created id="Author1"
Yes, you created it using your showTextBoxfunction. But that did also increment the ctrto 2, so that you now are looking for Author2which obviously does not exist. So put a ctr--;before it and it should work.
是的，您使用showTextBox函数创建了它。但这也增加了ctrto 2，因此您现在正在寻找Author2显然不存在的。所以ctr--;在它之前放一个它应该可以工作。
