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

Question

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

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

... 即：

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>.

应该有 "toggle" 效果

听起来您可以在 parent <div> 上使用一个事件 click 事件处理程序来完成切换。它只需要是一个智能事件处理程序。 :-)

游戏计划

我会在这里使用一种叫做事件委托的技术。

创建一个事件处理程序。

1) 将其命名为 manageChildDivs(e) 或其他名称。

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

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

第 1 步：

首先，在 parent 上添加带有 click 事件的 <div> 很容易。定义事件处理程序。请记住，如果您单击刚刚添加的 child <div>，您不希望该事件将另一个 <div> 添加到 parent <div>！ :-) 您只想删除 clicked <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> 的数量几乎是无限的。您不想允许添加无限事件处理程序的可能性。

希望对您有所帮助。添加到它，你会没事的。祝你好运。

此致，

安东尼·拉特利奇

Answer 2

https://jsbin.com/fehoxubumo/edit?html,css,js,console,output

function run(e) {

//determine if the element clicked has been clicked previously
if(e.target.clicked) {
    e.target.clicked = false;   // reset "clicked" attribute
    while (e.target.firstChild) {  // delete all children by iteration.
    e.target.removeChild(e.target.firstChild);
   }
  }

// if target element has not been clicked before
// has been reset, 
// or this is the first time it is clicked:

  else if(!e.target.clicked || e.target.clicked === undefined) {

//create a div element 
    let div = document.createElement('div');
//append the new div to the target element
    e.target.appendChild(div);
//set the target attribute "clicked" to true.
    e.target.clicked = true;
  }
}

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

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

Add child div into parent div on click, then remove it on second click

javascript

toggle

简介

游戏计划

第 1 步：

第 2 步：