使用Java脚本删除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);