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后删除div？

Answer 1

简介

更新：Alex表示应该为孩子<div>设置“切换”效果。

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

游戏计划

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

创建一个事件处理程序。

1）将其命名为manageChildDivs(e)或其他内容。

将manageChildDivs(e)分配给父 <div>。

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

第1步：

首先，在父级上添加<div> click事件很容易。定义事件处理程序。请注意，如果您点击刚添加的孩子<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);

通常，这就是我解决这个问题的方法，因为你可以创建的子<div>的数量几乎是无限的。您不希望允许添加无限事件处理程序。

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

此致

Anthony Rutledge

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中，然后在第二次单击时将其删除

2 个答案:

简介

游戏计划

第1步：

第2步：