删除多个div中的元素

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

的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（一个IM发现）

来源

2017-10-12 Nur Shaherra

是'divdrag40'应该是'divdrag42'，还是......？ – CBroe

在同一页面上不能有重复的ID。改用类。 –

元素的重复ID？ –

由于您使用的if后跟else if第二if如果第一if是假的，只会评价。因此，如果divdrag42大于2（或div =“div4”），那么如果divdrag32大于2，则永远无法评估。要改变这一点，只需取出else这个词。

如果你有很多这些div，那么你可以设置一个单独的函数并传递参数或循环块。也许是这样的 - 和原谅我 - 我还没有在一段时间做了jQuery和我假设，因为你说，它成功地消除在第一if股利你的代码工作：

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 + "'");

基本上你必须使用该文本穿过建选择 - 让我知道，如果我有错的 - 也许它必须是一个两行建立的选择器然后使用它

既然你说它的工作原理我想用多个ID，但这些应该是类jQuery的交易，所以不是

<div id="div4">...

使用

<div class="dropHere">...

这是被提及的原因是，在一个ID选择一个。长度应始终1作为ID在页面上是唯一的。

然后，您可以通过选择项目使用由安德烈提到的方法：

document.getElementsByClassName("dropHere")

来源

2017-10-12 01:56:27 wunth

抓斗每一个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(); 
}

来源

2017-10-12 01:59:00

这是什么？它如何回答这个问题？不要只是脱口而出代码。自己解释一下！ https://stackoverflow.com/help/how-to-answer – Rob

请考虑添加一些细节和解释来支持您的答案，以帮助他人 –

你的元素相同的id div3和div4，所以在JavaScript中，它将只删除给定id的第一个匹配项，因为在DOM中不允许使用重复元素id。你需要使用不同的id，或者你可以使用class而不是id。

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

来源

2017-10-12 02:10:22

不是很简洁，但我认为这是你在找什么..

$('.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() { ...

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

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

小提琴

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

来源

2017-10-12 02:38:14

删除多个div中的元素

回答

相关问题