特定のリストからチェックされたアイテムのリストを削除するには

Question

ここには2 ulのリストがあります。リストには2つのリストと2つの削除ボタンがあります。ここでは、削除ボタンのボタンを1つだけクリックするだけで、リスト1のアイテムをチェックすると、削除ボタンを押した後にリスト1のアイテムだけが削除されますリスト2のチェックはチェックされているかどうか、チェックされていればチェックされます。今、私はリスト1の削除ボタンを使ってリスト2のアイテムを削除することができます。私がインターネットで読んだのは削除ボタンを押した後です。何かを使うかもしれません：$(event.currentTarget).parent()正確なコンテンツリストをこのボタンに入れ、このリストの中で処理してください。私は正しい？

$(document).ready(function() { 
 
    $("#delete").click(function() { 
 
     var deleteItem = []; 
 
     $("input:checkbox").each(function() { 
 
      var $this = $(this); 
 

 
      if ($this.is(":checked")) { 
 
       deleteItem.push($this.attr("name")); 
 
      } 
 
     }); 
 
     if (deleteItem != []) { 
 
      if (deleteItem.indexOf("cbox1") > -1 && deleteItem.indexOf("cbox2") > -1) { 
 
       $("#box1").remove(); 
 
       $("#box2").remove(); 
 
      } 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<ul>List 1 
 
    <li id="box1"><span><input type="checkbox" name="cbox1" value="1" /><a href="http://www.w3schools.com">Visit W3Schools1.com!</a></span></li> 
 
    <li id="box2"><span><input type="checkbox" name="cbox2" value="2" /><a href="http://www.w3schools.com">Visit W3Schools2.com!</a></span></li> 
 
    <li id="box3"><span><input type="checkbox" name="cbox3" value="3" /><a href="http://www.w3schools.com">Visit W3Schools3.com!</a></span></li> 
 
    <button id="delete">Delete</button> 
 
</ul> 
 

 

 
<ul>List 2 
 
    <li id="box1"><span><input type="checkbox" name="cbox1" value="1" /><a href="http://www.w3schools.com">Visit W3Schools1.com!</a></span></li> 
 
    <li id="box2"><span><input type="checkbox" name="cbox2" value="2" /><a href="http://www.w3schools.com">Visit W3Schools2.com!</a></span></li> 
 
    <li id="box3"><span><input type="checkbox" name="cbox3" value="3" /><a href="http://www.w3schools.com">Visit W3Schools3.com!</a></span></li> 
 
    <button id="delete">Delete</button> 
 
</ul>

Answer 1

私のコメントで述べたように、idは一意でなければならないので、idの代わりにクラスを使うべきです。

Here is a Fiddle Demo.

のjQuery：クラスを持つ要素 'を削除' がクリックされたとき

$('.delete').click(function() { 
    var items = $(this).parent('ul').find('input:checked'); 
    items.closest('li').remove(); 
}); 

、それは親のULを見つけ、確認入力を探します。それらが見つかると、それらの入力に最も近いliを探して削除します。

HTML：

<ul>List 1 
    <li class="box1"><span><input type="checkbox" name="cbox1" value="1" /><a href="http://www.w3schools.com">Visit W3Schools1.com!</a></span></li> 
    <li class="box2"><span><input type="checkbox" name="cbox2" value="2" /><a href="http://www.w3schools.com">Visit W3Schools2.com!</a></span></li> 
    <li class="box3"><span><input type="checkbox" name="cbox3" value="3" /><a href="http://www.w3schools.com">Visit W3Schools3.com!</a></span></li> 
    <button class="delete">Delete</button> 
</ul> 


<ul>List 2 
    <li class="box1"><span><input type="checkbox" name="cbox1" value="1" /><a href="http://www.w3schools.com">Visit W3Schools1.com!</a></span></li> 
    <li class="box2"><span><input type="checkbox" name="cbox2" value="2" /><a href="http://www.w3schools.com">Visit W3Schools2.com!</a></span></li> 
    <li class="box3"><span><input type="checkbox" name="cbox3" value="3" /><a href="http://www.w3schools.com">Visit W3Schools3.com!</a></span></li> 
    <button class="delete">Delete</button> 
</ul> 

---

OPがチェック入力の名前を見つける方法を尋ねました。ここではそれを行うための一つの方法は次のとおりです。

$('.delete').click(function() { 
    var items = $(this).parent('ul').find('input:checked'); 
    //iterate over objects and log the name 
    $.each(items, function(index, value) { 
    console.log($(this).attr('name')); 
    }); 
    items.closest('li').remove(); 
}); 

私はコンソールにname属性（ほとんどのブラウザではF12）itemsと出力内のオブジェクトを通過しますイテレータを追加しました。ここにはupdated Fiddle Demoがあります。

Answer 2

注：Idは一意である必要があります。あなたが同じIDを使用する傾向にある場合は、クラスに

ワーキングデモ

$(document).ready(function() { 
 

 
    $(".delete").click(function() { 
 
    var deleteItem = []; 
 
    $("input:checkbox").each(function() { 
 
     var $this = $(this); 
 
     if ($this.is(":checked")) { 
 
     $(this).parent().parent().remove() 
 
     } 
 
    }); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<ul>List 1 
 
    <li id="box1"><span><input type="checkbox" name="cbox1" value="1" /><a href="http://www.w3schools.com">Visit W3Schools1.com!</a></span> 
 
    </li> 
 
    <li id="box2"><span><input type="checkbox" name="cbox2" value="2" /><a href="http://www.w3schools.com">Visit W3Schools2.com!</a></span> 
 
    </li> 
 
    <li id="box3"><span><input type="checkbox" name="cbox3" value="3" /><a href="http://www.w3schools.com">Visit W3Schools3.com!</a></span> 
 
    </li> 
 
    <button class="delete">Delete</button> 
 
</ul> 
 

 

 
<ul>List 2 
 
    <li id="box1"><span><input type="checkbox" name="cbox1" value="1" /><a href="http://www.w3schools.com">Visit W3Schools1.com!</a></span> 
 
    </li> 
 
    <li id="box2"><span><input type="checkbox" name="cbox2" value="2" /><a href="http://www.w3schools.com">Visit W3Schools2.com!</a></span> 
 
    </li> 
 
    <li id="box3"><span><input type="checkbox" name="cbox3" value="3" /><a href="http://www.w3schools.com">Visit W3Schools3.com!</a></span> 
 
    </li> 
 
    <button class="delete">Delete</button> 
 
</ul>

Answer 3

うんあなたは（.parentの使用に右であることを変換する）jqueryのメソッド。私はあなたがするトライ何を理解していれば、あなたは多分この方法でコードを向上させることができます

$(document).ready(function() { 

    $("#delete").click(function() { 

    var parentUl = $(this).parent(); // get the parent url of the clicked button 
    var li_items = parentUl.find('li'); // get the li in the parent ul 

    li_items.each(function() { // for each li retrevied 
     if ($(this).children('input:checkbox').is(':checked')) // if the input is checked 
      $(this).remove(); // we remove it 
    }); 

}); 

はそれが役に立てば幸い！ :)

EDIT：

他が言うように、あなたの代わりにIDのクラスを使用する必要があります。定義ごとに、idはHTML内の一意のブロック識別子と見なす必要があります。あなたのケースでは2つのボタンがあるので、これを行う方が良いです：<button class="delete"></button>