Removing element dynamically

Question

I'm trying to remove an element that I created dynamically. This is how I created it...

var divTag = document.createElement("div");
divTag.id = "affiliation";
divTag.innerHTML = "Stuff Here";

I've tried several methods of removing it without success. Here's what I have so far.

var A = document.getElementById('affiliation');
A.parentNode.removeChild(A);

Suggestions?

I'd rather do it pure javascript. However, I'd love to hear any suggestions. — user1612226, Sep 05 '12 at 18:18
@user1612226 - are you sure that doesn't work? I do something like that all the time. — Travis J, Sep 05 '12 at 18:19
@user1612226 Updated the answer with both jQuery and Pure JavaScript way... :) — Praveen Kumar Purushothaman, Sep 05 '12 at 18:20
possible duplicate of [JavaScript: remove element by id](http://stackoverflow.com/questions/3387427/javascript-remove-element-by-id) — locrizak, Sep 05 '12 at 18:20
What you've got should work. Additionally, there's no need to re-query the DOM. Just use your original reference: `divTag.parentNode.removeChild(divTag);` — Joseph Silber, Sep 05 '12 at 18:21
Perhaps I'm missing something, but as per your code snippet, you never actually added the element to the DOM, so `A` will always be undefined. — FilmJ, Sep 05 '12 at 18:26

Praveen Kumar Purushothaman · Answer 1 · 2012-09-05T18:24:29.500

0

If you wish to use jQuery, it is very easy to remove:

$("#affiliation").remove();

For the normal JavaScript, you can use this:

var node = document.getElementById("affiliation");
if (node.parentNode) {
    node.parentNode.removeChild(node);
}

edited Sep 05 '12 at 18:24

answered Sep 05 '12 at 18:19

Praveen Kumar Purushothaman

160,666
24
190
242

1

maybe `$("#affiliation").remove();` – Mihai Iorga Sep 05 '12 at 18:23

score 0 · Answer 2 · answered Sep 05 '12 at 18:21

Did you appended to the body or a parent?

var divTag = document.createElement("div");
divTag.id = "affiliation";
divTag.innerHTML = "Stuff Here";
document.body.appendChild(divTag);


element = document.getElementById("affiliation");
element.parentNode.removeChild(element);

score 0 · Answer 3 · answered Sep 05 '12 at 18:22

This snippet just works for me fine. The only difference is I added the "affiliation" divTag to the body

function insert() {
    var divTag = document.createElement("div");
    divTag.id = "affiliation";
    divTag.innerHTML = "Stuff Here";
    document.body.appendChild(divTag);
}
function remove() {
    var A = document.getElementById('affiliation');
    A.parentNode.removeChild(A);
}

score 0 · Answer 4 · answered Sep 05 '12 at 18:25

0

Check Node.removeChild

var A = document.getElementById("affiliation");
if (A.parentNode) {
    A.parentNode.removeChild(A);
}

answered Sep 05 '12 at 18:25

kushalbhaktajoshi

4,582
3
21
37

Removing element dynamically

4 Answers4