Question

我已经谷歌搜索了几个小时并尝试了不同的方法，并且无法使其发挥作用。

我试图做的是：如果没有框，则添加一个框。如果有一个您要点击的框，则删除该框。

到目前为止，它会移除一个框但会自动添加一个新框，当应该没有时，会在屏幕上留下一个框。

如果有人点击它，如何在纯Javascript中删除该框。

这是我的jsfiddle所以你可以看到发生了什么。 https://jsfiddle.net/on6z83ko/10/

代码：

addEventListener('click', createBox);

function createBox(event){

    var box = document.createElement('div');

    document.body.appendChild(box);

    box.className = "box";
    box.style.visibility="visible";    
    box.style.left = event.pageX + 'px';
    box.style.top = event.pageY + 'px';

    var mouse = event.currentTarget;
    mouse.click = (mouse.click || 0) +1;

    console.log(mouse.click);

    box.addEventListener("click", function(){

        var deleteBox = document.getElementsByClassName('box');

        if(deleteBox){
            box.remove();
        }
    });
}

Answer 1

document.addEventListener('click', createBox);

function createBox(event){
    var target = event.target;

    if(target.className === 'box'){
        target.parentNode.removeChild(target);
    } else {
        var box = document.createElement('div');

        box.className = "box";
        box.style.visibility="visible";
        box.style.left = event.pageX + 'px';
        box.style.top = event.pageY + 'px';

        document.body.appendChild(box);
    }
}

Answer 2

从我如何阅读问题开始，当屏幕上有一个框时，它不会添加一个框，并在它出现时将其删除单击，然后在下一次单击时添加另一个。 https://jsfiddle.net/on6z83ko/40/

  addEventListener('click', createBox);
  var box;
  var boxBounds = {
    Left: 0,
    Right: 0,
    Top: 0,
    Bottom: 0
  };


  function createBox(event) {

    if (box == null) {
      box = document.createElement('div');
      var target = event.target;

      document.body.appendChild(box);

      box.className = "box";
      box.style.visibility = "visible";
      box.style.left = event.pageX + 'px';
      box.style.top = event.pageY + 'px';
      return;
    }

    //alert(event.pageX + "," + event.pageY);

    boxBounds.Left = parseInt(box.style.left, 10);
    boxBounds.Right = boxBounds.Left + 100;
    boxBounds.Top = parseInt(box.style.top, 10);
    boxBounds.Bottom = boxBounds.Top + 100;

    //alert("");
    //alert("L" + boxBounds.Left + " R" + boxBounds.Right + " T" + boxBounds.Top + " B" + boxBounds.Bottom);

    //remove if in bounds of box
    if ((event.pageX >= boxBounds.Left) && (event.pageX <= boxBounds.Right) &&
      (event.pageY >= boxBounds.Top) && (event.pageY <= boxBounds.Bottom)) {
      //alert("InBOX");
      document.body.removeChild(box);
      box = null;
      return;
    }
  }

Answer 3

这是你要找的吗？

JSFiddle Example

这是关键点：

if(target.classList.contains('box')){
    target.remove();
    }

Answer 4

您可以在框上创建偶数处理程序并停止传播以阻止主要单击事件，并删除该事件处理程序中的框。我无法通过手机编辑您的代码：（

如何使用事件监听器（纯Javascript）创建元素消失

4 个答案:

JSFiddle Example