刪除多個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中的元素

回答

相關問題