Removing a DOM element with Javascript

Question

I've been trying, unsuccessfully, to close/remove a DOM element when an image is clicked. I have built the code for the elements to be called onload but now I need for them to close or be removed from the body onclick of an image.

This is the code to call the element:

function myFunction() {  

var embed = document.createElement('embed');
embed.setAttribute("src", "http://www.domain.com");
embed.setAttribute("width", "100%"); 
embed.setAttribute("height", "100%");

var content = document.createElement('div');
content.id = 'content';
content.className = 'content_layer';

var close = document.createElement('div');
close.id = 'close';
close.className = 'close_layer';  

var close_link = document.createElement('a');  
close_link.setAttribute("href", "javascript:NEED CODE HERE????");

var close_img = document.createElement('img');  
close_img.setAttribute("src", "http://img.com");
close_img.setAttribute("width", "100%"); 
close_img.setAttribute("height", "100%");

content.appendChild(embed);
close.appendChild(content);
close_link.appendChild(close_img);   
close.appendChild(close_link); 


document.getElementsByTagName('body')[0].appendChild(close);
}

window.onload = myFunction();

Specifically, I need for the "close_link" to remove the "close" element from the body. Since all other elements are a child to this, I'm assuming they will all close as well once the "close" is removed (please correct me if i'm wrong here).

Any suggestions using Javascript? Also, please note I'm not looking to add jquery to this...

Thanks!

Jon

possible duplicate of [Remove element by id](http://stackoverflow.com/questions/3387427/remove-element-by-id) — Rafael, Jan 27 '15 at 02:09

score 1 · Accepted Answer · answered Jan 29 '15 at 03:20

The solution I have worked out is as follows:

var close = document.createElement('div');
close.id = 'close';
close.className = 'close_layer';  

var close_link = document.createElement('a');  
close_link.setAttribute("href", "javascript:myFunction()");

var close_img = document.createElement('img');  
close_img.setAttribute("src",
"img.jpg");
close_img.setAttribute("width", "100%"); 
close_img.setAttribute("height", "100%");

close_link.appendChild(close_img);   
close.appendChild(close_link); 

function myFunction() {
var element = document.getElementById("close");
element.parentNode.removeChild(element); }

Hope this helps others!

Jon

Paul S. · Answer 2 · 2015-01-27T02:16:40.493

0

The pattern you're looking for is target_node.parentNode.removeChild(target_node)

To do this on an click you should listen via trigger_node.addEventListener

As for the actual logic to do these things, it's up to you - you could even write a function to do it for multiple different event types (see below)!

If you're happy to keep references alive until the handler is used to destroy the node,

function removeNodeOn(events, trigger_node, target_node) {
    var i;
    events = events.split(' ');
    function handler(e) { // a function to do what we want
        target_node && target_node.parentNode && target_node.parentNode.removeChild(target_node);
        // cleanup
        target_node = null; // kill reference
        removeHandlers();   // don't need to listen anymore
    }
    function removeHandlers() { // a function to clean up
        var i;
        for (i = 0; i < events.length; ++i) {
            trigger_node.removeEventListener(events[i], handler);
        }
    }
    for (i = 0; i < events.length; ++i) { // attach everything to DOM
        trigger_node.addEventListener(events[i], handler);
    }
}

Here events is a white-space delimited list of event types
So then

removeNodeOn('click', close_link, close);

edited Jan 27 '15 at 02:16

answered Jan 27 '15 at 02:10

Paul S.

64,864
9
122
138

I found that this works: function remove(close) { return(EObj=document.getElementById(close))?EObj.parentNode.removeChild(EObj):false; } Can you help explain why the following code DOES NOT call the function above? var close_link = document.createElement('a'); close_link.setAttribute("href", "javascript:remove(close);"); – user3791975 Jan 27 '15 at 19:00
`close` is not what you expect in the global scope, your uri-style _JavaScript_ gets interpreted at the time of the click, which happens in the global scope. Therefore, the identifier gets looked up like "`close` exists? no. `window.close` exists? yes, so you must mean `window.close`" – Paul S. Jan 29 '15 at 01:07
Thanks Paul S., much appreciated for taking the time to dig into this! I was able to work out a solution (although I was sure I tried this prior to posting the question to Stack). See below for the code. – user3791975 Jan 29 '15 at 03:14

Removing a DOM element with Javascript

2 Answers2