What is the best way to remove a <br> from a <div> that was created using appendChild?

Question

I am dynamically creating textboxes using document.createElement('input') and adding a break between them using the same method - then using .appendChild to add this to my div.

var box = document.getElementById("myDiv");
var inp = document.createElement('input');
inp.type = 'text';
// add attributes, etc...
box.appendChild(inp);
box.appendChild(document.createElement("br"));

I can delete these textboxes using .removeChild and it is fine, but the breaks are still there.

box.removeChild(document.getElementById(...));

My question is how do I remove each of the breaks that were created between each of the textboxes?

Answer 1

It should be possible to remove the BRs if you keep a reference to them.

This should work:

var brRef = document.createElement("br");
...    
box.removeChild(brRef);

Answer 2

var breaks = box.getElementsByTagName('BR');

for (var i = 0; i < breaks.length; i++) {
    box.removeChild(breaks[i]);
}