如何删除 div 中的单个文本节点而不删除所有文本节点？

Question

如何删除单个动态创建的文本节点？

我正在动态生成输入，并使用 .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);

Answer 1

为什么不首先将两者都包装在字段集中呢？

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

这样，只需删除字段元素就会同时删除您的文本节点和输入。

Answer 2

保留对它的引用：

var txt = document.createTextNode('Status: ');
box.appendChild(txt);

然后删除：

txt.parentNode.removeChild(txt);

如果节点应该紧接在输入之前，这也将起作用：

inp.parentNode.removeChild(inp.previousSibling);

如果您不使用 innerHTML 或 normalize( ，它应该起作用)，这可能会导致节点被重新创建或合并，从而使您的引用无效。

如果您想从节点中删除任意文本，可以使用 textnode.splitText(offset)。

Answer 3

不要删除属于 DOM 中文本节点列表一部分的文本节点。即使您引用它们（在将它们附加到 DOM 之前）。

浏览器可能会合并多个文本节点！我不确定标准的规定是什么，但它是可能的 - 至少一些经验告诉我..（可能是旧浏览器，但情况确实如此）。

相反，您可以将每个文本节点包装在 span 或 div 标记中，或者可以使用某种文本替换。我更喜欢前者。

Answer 4

如果你把这一行：改为

box.appendChild(document.createTextNode('Status: '));

：

var textNode = document.createTextNode('Status: ');
box.appendChild(textNode);

那么你可以稍后引用textNode var来删除它。但要小心，一些浏览器会合并相邻的文本节点。

Answer 5

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 = "";