Javascript 如何删除div中的单个文本节点而不删除所有文本节点？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1942564/
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 remove an individual text node in a div without removing all of them?
提问by Jaden
How do I go about removing an individual dynamically created text node?
如何删除单个动态创建的文本节点？
I am generating input's on the fly and am using .createTextNode to place descriptive text before the elements. I need the ability to delete specific elements that are being created and am using .removeChild to do it. That works fine for removing an individual input because I have something to reference (id/name). Is there a way to set some sort of reference to each text node so I can delete it along with its corresponding input control?
我正在即时生成输入并使用 .createTextNode 在元素之前放置描述性文本。我需要能够删除正在创建的特定元素，并且正在使用 .removeChild 来执行此操作。这适用于删除单个输入，因为我有一些参考（id/name）。有没有办法设置对每个文本节点的某种引用，以便我可以将其与其相应的输入控件一起删除？
var box = document.getElementById("myDiv");
box.appendChild(document.createTextNode('Status: '));
var inp = document.createElement('input');
inp.type = 'text';
// add attributes, etc...
box.appendChild(inp);
回答by Steve H
Why not wrap both in a fieldset to begin with?
为什么不将两者都包装在一个字段集中呢？
var box = document.getElementById("myDiv");
var field = document.createElement('fieldset');
field.appendChild(document.createTextNode('Status: '));
var inp = document.createElement('input');
inp.type = 'text';
// add attributes, etc...
field.appendChild(inp);
box.appendChild(field);
This way just removing the field element will remove both your textnode and your input at the same time.
这样，只需删除 field 元素即可同时删除您的 textnode 和您的输入。
回答by Kornel
Keep reference to it:
继续参考它：
var txt = document.createTextNode('Status: ');
box.appendChild(txt);
and then remove with:
然后删除：
txt.parentNode.removeChild(txt);
If node is supposed to be immediately before the input, this will work as well:
如果节点应该紧接在输入之前，这也将起作用：
inp.parentNode.removeChild(inp.previousSibling);
It should work if you don't use innerHTMLor normalize(), which could cause nodes to be re-created or merged, invalidating your references.
如果您不使用innerHTMLor normalize()，它应该可以工作，这可能会导致重新创建或合并节点，从而使您的引用无效。
In case you wanted to remove arbitrary text from a node, there's textnode.splitText(offset).
如果您想从节点中删除任意文本，可以使用textnode.splitText(offset).
回答by Frunsi
Do not remove text nodes that are part of a list of textnodes in the DOM. Even if you reference them (before you appended them to the DOM).
不要删除属于 DOM 中文本节点列表一部分的文本节点。即使您引用了它们（在将它们附加到 DOM 之前）。
The browser may merge multiple text nodes! I am not sure what the standards state, but its possible - at least some experience told me.. (may be old browsers, but it was the case).
浏览器可能会合并多个文本节点！我不确定标准规定了什么，但它可能 - 至少一些经验告诉我..（可能是旧浏览器，但情况确实如此）。
Instead of that, you could either wrap each text node in a span or div tag, or you could use some kind of text replacements. I'd prefer the former.
取而代之的是，您可以将每个文本节点包装在一个 span 或 div 标签中，或者您可以使用某种文本替换。我更喜欢前者。
回答by Annie
If you change this line:
如果您更改此行：
box.appendChild(document.createTextNode('Status: '));
To:
到：
var textNode = document.createTextNode('Status: ');
box.appendChild(textNode);
Then you can refer to the textNode var later to delete it. Be careful, though--some browsers will merge adjacent text nodes.
然后您可以稍后参考 textNode var 将其删除。不过要小心——有些浏览器会合并相邻的文本节点。
回答by davidcl
var box = document.getElementById("myDiv");
var label = document.createTextNode('Status: ')
box.appendChild(label);
var inp = document.createElement('input');
inp.type = 'text';
// add attributes, etc...
box.appendChild(inp);
// do other stuff
//remove the label
label.nodeValue = "";
