Как удалить отдельный текстовый узел в div, не удаляя их все?

Question

Как мне удалить отдельный динамически созданный текстовый узел?

Я генерирую входные данные на лету и использую .createTextNode для размещения описательного текста перед элементами. Мне нужна возможность удалять определенные элементы, которые создаются, и я использую .removeChild, чтобы сделать это. Это прекрасно работает для удаления отдельного ввода, потому что у меня есть кое-что для ссылки (идентификатор / имя). Есть ли способ установить какую-то ссылку на каждый текстовый узел, чтобы я мог удалить его вместе с соответствующим элементом управления вводом?

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