Question

How do I go about removing an individual dynamically created text node?

I am generating input’s on the fly and am using .createTextNode to place descriptive text before the elements. I need the ability to delete specific elements that are being created and am using .removeChild to do it. That works fine for removing an individual input because I have something to reference (id/name). Is there a way to set some sort of reference to each text node so I can delete it along with its corresponding input control?

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

Why not wrap both in a fieldset to begin with?

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

This way just removing the field element will remove both your textnode and your input at the same time.