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

Question

每次更新都会创建Div，并且其位置会在“ levelWrapper”中随机分配。 所有这些div共享一个名为tree的类。 每当我单击以树为类的div时，代码就会遍历所有现有的树分类div，并比较它们相对于鼠标单击坐标的位置。 如果它们的位置在点击范围内（即100px），那么我要删除所说的divs 。

下面是我已经做我想要什么， 但通过代码后第一次运行错误。 我想我知道它为什么会出错，请阅读下文。

 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); 

 #levelWrapper { position: relative; top: 25px; width: 1100px; height: 700px; margin: auto; border: 1px solid red; } .tree { position: absolute; background: green; height: 12px; width: 12px; } 

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

它之所以var p = $("#tree" + g).position(); ，是因为在第二次运行时，此行var p = $("#tree" + g).position(); 选择已删除的div，因此它返回null。

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

我可能可以按照“ if（null）...”的方式执行某些操作，但是div ID会不断增加，很容易达到for循环必须经过的200多个div，这显然很慢。

因此，我没有通过它们的ID删除div，而是想到了一些引用它们的数组，并且每当我删除一个div时，数组就会“级联”下来，减少了我必须做的检查工作量，并避免了在尝试执行时返回null找到已删除的div的左侧和顶部的偏移量。

Answer 1

假设您要从树中删除所有类名称为“ child”的元素：

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

或通过索引使用删除您的树孩子：

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

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

Answer 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();
      }
    }

2. 委托-每次循环时添加点击处理程序

---

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

 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); }); 

 #levelWrapper { position: relative; top: 25px; width: 1100px; height: 700px; margin: auto; border: 1px solid red; } .tree { position: absolute; background: green; height: 12px; width: 12px; } 

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

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 ：

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

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

Answer 5

您可以尝试以下方法：

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

要么

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

您可以在detach（），hide（）和remove（）之间的差异中看到detach和remove 之间的区别-jQuery