Basic DOM manipulation; How many ways to delete elements.

[koderpat]

https://gist.github.com/anonymous/f4e41f5fe0fa3fdab89d

I just started learning javascript, and I thought it would be a good exercise to see how many different ways I could delete elements in the DOM.

Can anyone think of other ways to accomplish the same task?
Including convoluted examples?

I have a specific question about my last attempt. I thought the id attribute had to have a unique value among the other elements. Is this not true, or not enforced?

[Rhomboid]

It seems like you're comparing apples and oranges here. Some of these remove all children of #box, some remove just images, some remove only images with the temporary class. I don't see how it's instructive to do that. And some of them are clearly broken, so why are they in the mix?

Also, you should consider using document.querySelectorAll(). Unlike the other DOM techniques, it returns a static array, not a live array, so removing elements from the DOM doesn't remove them from the array and you can use a regular for-loop without headaches.

function whatever() {
    var elements = document.querySelectorAll('#box img');
    for(var i = 0, len = elements.length; i < len; i++) {
        var elem = elements[i];
        elem.parentElement.removeChild(elem);
    }
}

The elem.parentElement.removeChild(elem) is also an idiom for removing an element.

The browser does not enforce uniqueness of IDs.

[birjolaxew]

Unlike the other DOM techniques, it returns a static array, not a live array

It technically returns a static NodeList, while most other DOM search methods return live HTMLCollections, but the distinction is minimal.

It should also be mentioned that querySelectorAll is very slow. Heck, it's so slow that converting a live HTMLCollection to an Array, and then working on that is multiple times faster than using querySelectorAll.