Question

这是如何工作的，因此只有2项可以在div3和div4中。所以我试图删除最后一个位置的项目，如果它超过2并且在div4中。但是，删除后，我想从div3中删除最后一项，如果它也超过2。

使用Javascript：

var divdrag32 = $("#div3").length;
var divdrag42 = $("#div4").length;

if (divdrag42 > 2 || div === "div4") {
   $("#div4").find("#drag1, #drag2")[2].remove();

  } else if (divdrag32 > 2 || div === "div3") {
      $("#div3").find("#drag1, #drag2")[2].remove();
  }

上面的代码只删除了div4的最后一个位置项。但它并没有删除div3的最后一个位置项。＃drag1和＃drag2的id是项目的id（找到的一个）

Answer 1

由于您使用if后跟else if，因此第二个if只会评估第一个if是否为假。因此，如果divdrag42大于2（或div =“div4”），那么你将永远不会评估divdrag32是否大于2。要改变它，只需取出else。

这个词

如果你有很多这些div，那么你可以设置一个单独的函数并传递参数或循环块。也许这样的事情 - 请原谅我 - 我有一段时间没有完成jQuery，我假设你的代码有效，因为你说它成功删除了第一个if中的div：

function removeExtraDivs(elmntId) {
    var $thisElmnt = $("'" + "#" + elmntId + "'");
    if ($thisElmnt.length > 2 || div === elmntId) {
        $thisElmnt.find("#drag1, #drag2")[2].remove();
    }
}
removeExtraDivs("div4");
removeExtraDivs("div3");

抱歉 - 我不确定这条线是否正确

var $thisElmnt = $("'" + "#" + elmnt + "'");

基本上你必须使用传递的文本来构建选择器 - 让我知道我是否有错 - 也许它必须是几行来构建选择器然后使用它

既然你说它有效我猜jQuery会处理多个ID，但那些应该是类，所以不是

<div id="div4">...

使用

<div class="dropHere">...

提到这一点的原因是ID选择器上的.length应该始终为1，因为ID在页面上是唯一的。

然后，您可以使用Andrey提到的方法选择以下项目：

document.getElementsByClassName("dropHere")

Answer 2

抓住每个div元素并删除超过2个。

var divs = document.getElementsByTagName("div");

for(var i = 0; i < divs.length; i++){
    //do something to each div like
    divs[i].find("#drag1, #drag2")[2].remove();
}

Answer 3

你在div3和div4中有相同的id元素，所以在JavaScript中它只删除第一次出现的给定id，因为在DOM中不允许重复元素id。您需要使用不同的ID，或者您可以使用class而不是id。

purrr::accumulate(d$x, `-`, .init = d$y[1])
#> [1] 3 3 3 3 2 2 0 0

Answer 4

不是很简洁，但我认为这是你正在寻找的......

＆＃13;

$('.removerer').click(function() {
  $('.div3').children().each(function(i) {
    if(i > 1) {
      $(this).remove();
    }
  })
  $('.div4').children().each(function(i) {
    if(i > 1) {
      $(this).remove();
    }
  })
})

// loops through each child of div3 and div4, removing each child after the 2nd.
// onclick is used for demonstration purposes, if this is something you need on page load just replace the .click line with $(document ).ready(function() { ...

＆＃13;

.removerer {
  display: inline-flex;
  background-color: hsla(207, 100%, 50%, 1);
  cursor: pointer;
}
.removerer:hover {
  background-color: hsla(353, 100%, 50%, 1);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div div1">
  <span>d1 item 1</span>
  <span>d1 item 2</span>
  <span>d1 item 3</span>
</div>
<div class="div div2">
  <span>d2 item 1</span>
  <span>d2 item 2</span>
  <span>d2 item 3</span>
  <span>d2 item 4</span>
</div>
<div class="div div3">
  <span>d3 item 1</span>
  <span>d3 item 2</span>
  <span>d3 item 3</span>
</div>
<div class="div div4">
  <span>d4 item 1</span>
  <span>d4 item 2</span>
  <span>d4 item 3</span>
  <span>d4 item 4</span>
</div>

<div class="removerer">
  click to remove all children greater than 2 in divs 3 and 4
</div>
<div class="">
  click run to reset
</div>

＆＃13;

<强>拨弄

https://jsfiddle.net/Hastig/uhLqujhb/

从多个div中删除元素

4 个答案: