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

这样只需删除field元素就可以同时删除textnode和输入。

Answer 2

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

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

而不是这样，您可以将每个文本节点包装在span或div标签中，也可以使用某种文本替换。我更喜欢前者。

Answer 3

继续参考：

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

然后删除：

txt.parentNode.removeChild(txt);

如果节点应该在输入之前，那么这也会起作用：

inp.parentNode.removeChild(inp.previousSibling);

如果您不使用innerHTML或normalize()，这可能会导致重新创建或合并节点，从而使您的参考无效。

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

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

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

5 个答案: