如何在不使用其ID的情况下删除div

Question

每次更新都会创建Div，并且他们的位置会在＆＃34; levelWrapper＆＃34;内随机化。所有这些div共享一个名为 tree 的类。每当我单击将 tree 作为类的div时，代码将运行所有现有的 tree 分类div，并比较它们相对于鼠标单击坐标的位置。如果他们的位置在点击范围内（100px），那么我想删除所说的div 。

这是我在第一次运行代码后已经做了我想做的事情 BUT 错误。我想我知道它为什么会出错，请在下面阅读。

＆＃13;

＆＃13;

var i = 0,
  a = 0;

function newTree() {
  var newTree = document.createElement('div');
  newTree.id = 'tree' + i;
  newTree.className = 'tree';
  document.getElementById("levelWrapper").appendChild(newTree);
}

function positionTree() {
  var levelWidth = document.getElementById("levelWrapper").offsetWidth;
  var levelHeight = document.getElementById("levelWrapper").offsetHeight;

  var treeX = Math.round(Math.random() * levelWidth);
  var treeY = Math.round(Math.random() * levelHeight);

  document.getElementById("tree" + i).style.left = treeX + "px";
  document.getElementById("tree" + i).style.top = treeY + "px";
}

function createTree() {
  a += 1;
  if (a == 20) {
    newTree(); // new div
    positionTree(); // position div
    a = 0; // reset counter for new div
    i++; // new ID for new div
  }
}

function getMouseCoordinates(e) {
  var offset = $('#levelWrapper').offset();
  mouseX = Math.round(e.clientX - offset.left);
  mouseY = Math.round(e.clientY - offset.top);
}

var clickRange = 100;

function update() {
  createTree();

  $('div.tree').click(function(e) {
    getMouseCoordinates(e);
    var numItems = $('.tree').length;

    for (g = 0; g < numItems; g++) {
      var p = $("#tree" + g).position();

      if ((p.left > (mouseX - clickRange)) &
        (p.left < (mouseX + clickRange)) &
        (p.top > (mouseY - clickRange)) &
        (p.top < (mouseY + clickRange))) {

        p = document.getElementById("tree" + g);
        p.parentNode.removeChild(p);
      }
    }
  });
}

function mainLoop() {
  update();
  requestAnimationFrame(mainLoop);
}

requestAnimationFrame(mainLoop);

＆＃13;

#levelWrapper {
  position: relative;
  top: 25px;
  width: 1100px;
  height: 700px;
  margin: auto;
  border: 1px solid red;
}

.tree {
  position: absolute;
  background: green;
  height: 12px;
  width: 12px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="levelWrapper"></div>

＆＃13;

＆＃13;

＆＃13;

它是错误的，因为在第二次运行时，这一行var p = $("#tree" + g).position();选择一个已被删除的div，因此它返回一个空值。

仍会创建新的div，但点击/删除功能会停止工作。

我可能会按照＆＃34; if（null）...＆＃34;但是div ID不断增加，很容易达到for循环必须经过的200多个div，而且速度明显很慢。

因此，我没有通过他们的ID删除div，而是考虑让一些数组引用它们，每当我删除一个div时，数组＆＃34; cascades＆＃34; down，减少我必须做的检查，并且每当它试图找到移除div的左侧和顶部的偏移量时避免返回null。

Answer 1

假设你要删除所有带有类名的元素＆＃34; child＆＃34;来自你的树：

$(".tree > .child").remove();

或通过索引使用删除您的树儿童：

var children = $(".tree").children();
[1,2,5].forEach(function(i) { children[i].remove(); });

您在此处设置要删除的数组索引。请注意，这是零基础！所以第一个元素是0。 这里我将删除索引为1,2和5的元素。键入您喜欢的任何索引！

Answer 2

1. 测试存在：

ID    count  OperationID 
100   111       1
100    55       2
99     69       1
99     33       2
98     33       1
98     47       2

1. 委托 - 每次循环时都添加一个点击处理程序

   for (g = 0; g < numItems; g++) {
      var $div = $("#tree" + g);
      if ($div.length==0) continue;
      var p = $div.position();

      if ((p.left > (mouseX - clickRange)) &
        (p.left < (mouseX + clickRange)) &
        (p.top > (mouseY - clickRange)) &
        (p.top < (mouseY + clickRange))) {

        $div.remove();
      }
    }

＆＃13;
＆＃13;
 $('#levelWrapper').on('click','div.tree',function(e) {
  getMouseCoordinates(e);
  $('.tree').each(function() {
    var p = $(this).position();
＆＃13;
var i = 0,
  a = 0;

function newTree() {
  i = $('#levelWrapper').children().length;
  var $newTree = $('<div/>', {
    'id': 'tree' + i,
    'class': 'tree'
  }); // .text(i); 
  $('#levelWrapper').append($newTree);
}

function positionTree() {
  var levelWidth = document.getElementById("levelWrapper").offsetWidth;
  var levelHeight = document.getElementById("levelWrapper").offsetHeight;

  var treeX = Math.round(Math.random() * levelWidth);
  var treeY = Math.round(Math.random() * levelHeight);

  document.getElementById("tree" + i).style.left = treeX + "px";
  document.getElementById("tree" + i).style.top = treeY + "px";
}

function createTree() {
  a += 1;
  if (a == 20) {
    newTree(); // new div
    positionTree(); // position div
    a = 0; // reset counter for new div
    i++; // new ID for new div
  }
}

function getMouseCoordinates(e) {
  var offset = $('#levelWrapper').offset();
  mouseX = Math.round(e.clientX - offset.left);
  mouseY = Math.round(e.clientY - offset.top);
}

var clickRange = 100;


function mainLoop() {
  createTree();
  requestAnimationFrame(mainLoop);
}


$(function() {
  $('#levelWrapper').on('click','div.tree',function(e) {
    getMouseCoordinates(e);
    $('.tree').each(function() {
      var p = $(this).position();

      if ((p.left > (mouseX - clickRange)) &
        (p.left < (mouseX + clickRange)) &
        (p.top > (mouseY - clickRange)) &
        (p.top < (mouseY + clickRange))) {

        $(this).remove();
      }
    });
  });
  requestAnimationFrame(mainLoop);
});
＆＃13;
#levelWrapper {
  position: relative;
  top: 25px;
  width: 1100px;
  height: 700px;
  margin: auto;
  border: 1px solid red;
}

.tree {
  position: absolute;
  background: green;
  height: 12px;
  width: 12px;
}
＆＃13;
＆＃13;
＆＃13;

Answer 3

我相信$('.tree').remove();正是您所寻找的。

编辑： 根据你的问题的评论，也许你正试图删除class =“tree”的孩子？

如果是这样的话：

$('.tree').children().remove();

如果你只想删除class =“tree”的其他实例而不是第一个，那么你可以这样做：

$('.tree').slice(1).children().remove();

Answer 4

来自.remove()上的jquery文档：

  

我们还可以包含一个选择器作为可选参数。例如，我们可以按如下方式重写之前的DOM删除代码：

$( "div" ).remove( ".hello" );

我认为您只想删除类.tree的第一个元素，因此您可以像这样使用:first-child：

＆＃13;

＆＃13;

$(document).ready(function() {
    $('.tree').remove(':first-child');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='parent'>
    <div class='tree'>Tree 1</div>
    <div class='tree'>Tree 2</div>
    <div>Etc</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

你可以试试这个：

    var temp = $('.tree');
     $(temp[0]).detach();

或者

    var temp = $('.tree');
     $(temp[0]).remove();

分离和删除之间的差异，您可以在Differences between detach(), hide() and remove() - jQuery

看到