使用 Javascript 删除 DOM 元素

Question

我一直在尝试在单击图像时 close/remove 一个 DOM 元素，但没有成功。我已经为要调用的元素构建了代码 onload 但现在我需要它们关闭或从图像的主体 onclick 中删除。

这是调用元素的代码：

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

具体来说，我需要 "close_link" 从正文中删除 "close" 元素。由于所有其他元素都是这个的子元素，我假设一旦 "close" 被删除它们也会全部关闭（如果我在这里错了请纠正我）。

使用 Javascript 有什么建议吗？另外，请注意，我不想将 jquery 添加到此...

谢谢！

乔恩

Answer 1

您要找的模式是target_node.parentNode.removeChild(target_node)

要在单击时执行此操作，您应该通过 trigger_node.addEventListener

收听

至于执行这些操作的实际逻辑，由您决定 - 您甚至可以编写一个函数来为多种不同的事件类型执行此操作（见下文）！

如果您愿意在使用处理程序销毁节点之前让引用保持活动状态，

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

这里 events 是一个以白字 space 分隔的事件类型列表
那么

removeNodeOn('click', close_link, close);

Answer 2

我的解决方案如下：

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

希望这对其他人有帮助！

乔恩

使用 Javascript 删除 DOM 元素

Removing a DOM element with Javascript

javascript

dom

onclick

element

removechild