javascript - 单击时将子 div 添加到父 div 中，然后在第二次单击时将其删除

Question

在纯 JavaScript 中，我必须添加一个子项 <div>容器内部 <div>使用click事件。然后，我必须删除每个 <div> 第二次点击。

注意:我已经在这个问题的第一个答案中找到了我需要的前半部分......

Adding new div into exist div with using onClick()

...即:

function run ()
{
    var div = document.createElement("div");  
    div.addEventListener("click", run);       
    this.appendChild(div);                    
    this.removeEventListener("click", run);  
}

document.getElementById("start").addEventListener("click", run); 

添加div后如何删除它？

Answer 1

简介

更新:Alex 说应该为 child 提供“切换”效果 <div> .

听起来您可以使用一个事件 click 父上的事件处理程序 <div>来完成切换。它必须是一个智能事件处理程序。 :-)

游戏计划

我将在这里使用一种称为事件委托(delegate)的技术。

创建一个事件处理程序。

1) 将其命名为manageChildDivs(e) ，或者其他什么。

分配manageChildDivs(e)致您的 parent <div> .

<div id="parentDiv">   <!-- Assign event handlers to parent div, here -->
    <div></div>
</div>

第 1 步:

首先，添加 <div>与 click parent 身上的事件很容易。定义事件处理程序。请记住，如果您单击子项 <div>您刚刚添加，您不希望该事件附加另一个 <div>致家长<div> ! :-) 你只需要点击 <div> (节点)被删除。

function manageChildDivs(e)  //Omitting old IE issues for a moment, etc ... 
{
    /* 
       I am just getting down to the nitty gritty, not giving an
       entire lecture on handling JavaScript events and browser issues.
       If you like jQuery, use that. This is just the skeleton.
    */

    if (e.target.getAttribute('id') === 'parentDiv')  //One way to do it.
    {
        var div = document.createElement('div');
        div.setAttribute('class', 'deleteDiv');
        e.target.appendChild(div);
    }
    else
    {
        if ((e.target.tagName === 'DIV') &&
                (e.target.getAttribute('class') === 'deleteDiv') && //Test something.
                    confirm('Delete this element?'))   //Ok, just a bonus.
        {
            e.target.parentNode.removeChild(e.target);
        }
    }

    return;
}

第 2 步:

最后，添加事件监听器。

document.getElementById('parentDiv').addEventListner('click', 'manageChildDivs', false);

一般来说，这就是我解决这个问题的方法，因为 child 的数量 <div>你可以创造的东西几乎是无限的。您不希望允许添加无限事件处理程序的可能性。

我希望这有帮助。添加它，你就会没事的。祝你好运。

真诚的，

安东尼·拉特利奇