如何從特定列表中刪除選中項目的列表

Question

我在這裏2 ul列表中包含兩個項目列表和2個刪除按鈕。我在這裏只使用一個按鈕點擊功能爲這兩個刪除按鈕，我想有這樣的事情：當用戶檢查列表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，然後查找檢查輸入。一旦找到這些信息，它會爲這些輸入尋找最接近的信息並將其刪除。

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

我添加了一個迭代器將在items和輸出的name屬性到控制檯（F12在大多數瀏覽器）經歷的對象。這是一個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 
    }); 

}); 

希望它有幫助！ :)

編輯：

至於對方說，你應該使用一個類，而不是一個ID。根據定義，一個id應該被認爲是你html中唯一的塊標識符。在你的情況下，你有2個按鈕，所以最好這樣做：<button class="delete"></button>