使用 Javascript 删除 DOM 元素

Question

我一直在尝试在单击图像时关闭/删除 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”元素。由于所有其他元素都是这个的孩子，我假设一旦“关闭”被删除，它们也会全部关闭（如果我在这里错了，请纠正我）。

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

谢谢！

乔恩

Answer 1

我想出的解决办法如下：

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

希望这对其他人有所帮助！

乔恩

Answer 2

您要查找的模式是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 是一个以空格分隔的事件类型列表
那么

removeNodeOn('click', close_link, close);