如何在不删除所有文本节点的情况下删除 div 中的单个文本节点？答案

【问题标题】：How to remove an individual text node in a div without removing all of them?如何在不删除所有文本节点的情况下删除 div 中的单个文本节点？
【发布时间】：2010-12-28 21:24:44
【问题描述】：

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

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

【问题讨论】：

标签： javascript dom textnode

【解决方案1】：

继续引用它：

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

然后删除：

txt.parentNode.removeChild(txt);

如果节点应该在输入之前，这也可以：

inp.parentNode.removeChild(inp.previousSibling);

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

为什么不将两者都包装在一个字段集中开始呢？

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

这种方式只删除字段元素将同时删除您的文本节点和您的输入。

【讨论】：

我实际上比我自己更喜欢这个答案。特别是在表单中，没有充分的理由让文本节点不在字段集/标签元素内。
谢谢你，但我有一个问题。如何将“字段”传递给函数以便删除字段集？我正在创建一个按钮，该按钮调用一个函数，单击该函数会删除该字段。但是这个按钮是在字段本身内创建的，当我将字段传递给它时，字段为空。

【解决方案5】：

如果你改变这一行：

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

收件人：

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

然后你可以参考 textNode var 稍后删除它。不过要小心——有些浏览器会合并相邻的文本节点。

【讨论】：