複数のdivから要素を削除する

Question

これは、div3とdiv4の内部に2つのアイテムしか配置できないということです。だから私は最後の位置の項目を削除しようとしています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の最後のポジション項目は削除されません。あなたが最初ifがfalseの場合にのみ評価するelse if二if続いifを使用しているので＃のdrag1と＃のdrag2とIDは、アイテムのid（1つのイム発見）

Answer 1

です。したがって、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 + "'"); 

は、基本的には、セレクタを構築するために通過し、そのテキストを使用する必要があり、この行が正しいか分からない、多分それは、構築するために行のカップルである必要がありますセレクタを使用してそれを使用する

あなたはそれが動作すると言う私は複数のIDでjQueryのお得な情報を推測するが、それらはクラスでなければなりませんので、代わりの

<div id="div4">... 

使用

<div class="dropHere">... 

が、これは言及されている理由は、IDセレクタの.LENGTHが常にあるべきであるということですIDはページ上で一意であるため、1。

あなたは、その後で項目を選択することによって、アンドレイが言及した方法で使用することができます

：すべてのdiv要素

document.getElementsByClassName("dropHere") 

Answer 2

グラブをし、あなたは内の要素の同じIDを持っている以上の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なので、JavaScriptでは重複した要素idが許されないため、JavaScriptでは指定されたidの最初の出現を削除します。異なるIDを使用する必要があります.IDの代わりにclassを使用することもできます。

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

Answer 4

非常に簡潔ではありませんが、私はそれがあなたが探しているものだと思います。

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