5

動的に作成された個々のテキスト ノードを削除するにはどうすればよいですか?

私はオンザフライで入力を生成しており、要素の前に説明テキストを配置するために .createTextNode を使用しています。作成中の特定の要素を削除する機能が必要で、.removeChild を使用して削除しています。参照するもの（ID /名前）があるため、個々の入力を削除するのに問題なく機能します。対応する入力コントロールと一緒に削除できるように、各テキスト ノードに何らかの参照を設定する方法はありますか?

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

innerHTMLまたはを使用しない場合は機能するはずです。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 変数を参照して削除できます。ただし、注意してください。一部のブラウザでは、隣接するテキスト ノードがマージされます。

于 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 に答える