5

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

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

5 回答 5

6

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

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

这样，仅删除字段元素将同时删除您的文本节点和您的输入。

于 2009-12-21T21:02:48.320 回答
2

继续参考它：

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

然后删除：

txt.parentNode.removeChild(txt);

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

inp.parentNode.removeChild(inp.previousSibling);

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

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

于 2009-12-21T21:21:00.737 回答
1

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

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

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

于 2009-12-21T21:12:17.457 回答
0

如果您更改此行：

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

到：

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

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

于 2009-12-21T20:59:17.283 回答
-1 
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 = "";
于 2009-12-21T21:04:28.740 回答