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

Question

每次更新都会创建 div，它们的位置在 "levelWrapper" 中是随机的。所有这些 div 共享一个名为树的 class。每当我单击具有 tree 作为 class 的 div 时，代码运行将遍历所有现有的 tree classed divs 并比较它们相对于鼠标点击坐标的位置。如果他们的位置在点击范围内（即 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(); 选择了一个 div 已被删除所以它 return 是一个空值。

新 div 仍在创建，但 click/remove 功能停止工作。

我可能会按照 "if (null) ..." 的方式做一些事情，但是 div ID 不断增加，很容易达到 for 循环必须经过的 200+ divs这明显很慢。

因此，我没有通过它们的 ID 删除 div，而是想到了一些引用它们的数组，每当我删除一个 div 时，数组 "cascades" 就会下降，从而减少 ammount检查我必须做的事情，并在它试图找到已删除的 div.

的左侧和顶部偏移时避免 null return

Answer 1

我相信 $('.tree').remove(); 就是您要找的。

编辑：根据对您问题的评论，也许您正在尝试删除 class="tree"?

的 children

如果是这样的话：

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

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

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

Answer 2

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

We can also include a selector as an optional parameter. For example, we could rewrite the previous DOM removal code as follows:
$( "div" ).remove( ".hello" );

我认为您只想删除 .tree 中带有 class 的第一个元素，因此您可以像这样使用 :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 3

你可以试试这个：

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

或者

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

detach 和 remove 的区别见Differences between detach(), hide() and remove() - jQuery

Answer 4

假设您想从树中删除名称为 class "child" 的所有元素：

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

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

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

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

Answer 5

测试是否存在：

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

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

 $('#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>

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

How to remove a div without using its ID

html

javascript

parent

removechild