删除在jQuery中选中的复选框

Question

我想删除在jQuery中选中的复选框，但是当我想获取复选框的状态时我收到错误消息。

jsfiddle

<div class="control-group"> 

<label class="checkbox"><input value="0" type="checkbox">Message 0</label> 
<label class="checkbox"><input value="1" type="checkbox">Message 1</label> 
<label class="checkbox"><input value="2" type="checkbox">Message 2</label> 
<label class="checkbox"><input value="3" type="checkbox">Message 3</label> 
<label class="checkbox"><input value="4" type="checkbox">Message 4</label> 
<label class="checkbox"><input value="5" type="checkbox">Message 5</label> 
<label class="checkbox"><input value="6" type="checkbox">Message 6</label> 
<label class="checkbox"><input value="7" type="checkbox">Message 7</label> 
<label class="checkbox"><input value="8" type="checkbox">Message 8</label> 

</div> 


<button class="btn" type="button" id="deleteAcc">Delete</button> 

我jQuery代码是：

$("#deleteAcc").on("click",function(){  
    $(".control-group label.checkbox").each(function(){ 
     if (this.children(":first").is(':checked')) { 
      this.remove(); 
     } 
    }); 
}); 

Answer 1

你不需要each方法。只要选择检查输入和删除父母（含有对应的复选框的标签的元素）：

$("#deleteAcc").on("click", function() { 
 
    $(".checkbox input:checked").parent().remove(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="control-group"> 
 

 
    <label class="checkbox"> 
 
    <input value="0" type="checkbox">Message 0</label> 
 
    <label class="checkbox"> 
 
    <input value="1" type="checkbox">Message 1</label> 
 
    <label class="checkbox"> 
 
    <input value="2" type="checkbox">Message 2</label> 
 
    <label class="checkbox"> 
 
    <input value="3" type="checkbox">Message 3</label> 
 
    <label class="checkbox"> 
 
    <input value="4" type="checkbox">Message 4</label> 
 
    <label class="checkbox"> 
 
    <input value="5" type="checkbox">Message 5</label> 
 
    <label class="checkbox"> 
 
    <input value="6" type="checkbox">Message 6</label> 
 
    <label class="checkbox"> 
 
    <input value="7" type="checkbox">Message 7</label> 
 
    <label class="checkbox"> 
 
    <input value="8" type="checkbox">Message 8</label> 
 

 
</div> 
 

 

 
<button class="btn" type="button" id="deleteAcc">Delete</button>

Answer 2

的实际问题是，在$.each闭合的this上下文是对DOM节点的引用本身。您可以通过包装解决这个问题的方法之一this在$：

$("#deleteAcc").on("click",function(){ 
    $(".control-group label.checkbox").each(function(){ 
     if ($(this).children(":first").is(':checked')) { 
      $(this).remove(); 
     } 
    }); 
}); 

Answer 3

试试这个 http://jsfiddle.net/zp3vwh1j/2/

$("#deleteAcc").on("click",function(){ 
    $("input:checkbox").each(function() { 
     if ($(this).is(":checked")) { 
      $(this).parent().remove(); 
     } 
    }); 
}); 

Answer 4

$().ready(function() { 
    $('body').on('click', '#deletebtn', function() { 

     $("#example1 tr").each(function() { 
      var rowSelector = $(this); 
      if (rowSelector.find("input[type='checkbox']").prop('checked')) 
      { 
       //THE MARKUP SHOWING THE ID IS NOT AVAILABLE 
       //POST A TABLE ENTRY TO CLEAR UP 
       var id = rowSelector.find('td').first().next().html(); 
       var sendObj = {Id : id}; 
       //USE JSON OBJECT 
       $.ajax({ 
        url : "/page.aspx/deleteRecord",//CHANGE TO YOUR URL 
        dataType: "json", 
        data: sendObj, 
        type: "POST", 
        success: function() { 
         alert("entry deleted"); 
        } 
       }); 
       rowSelector.remove(); 
      } 
     }); 

    }); 
});