Question User Question User - 2 months ago 6
jQuery Question

How to remove the unchecked checkbox parent element in jQuery

My Fiddle

I need to remove the unchecked checkbox items. I dont know where I'm going wrong. Some of the items only deleted I don't know why?

$(document).ready(function(){
$('#remove').click(function(){

var classlength = $('.showdropdowninv').find('.classname').length;
for(var i=0;i< classlength; i++){
if($('.showdropdowninv').find(".classname").eq(i).attr('checked') == true){
} else {
$('.showdropdowninv').find(".classname").eq(i).closest('li').remove();
} //else close
}
});
});


Just check the some of the checkbox and click remove link.

Answer

Onclick of remove link loop through all the unchecked checkboxes having class 'classname' using $("input.classname:checkbox:not(:checked)").each(function(){ and remove the parent of it using $(this).parent().remove();.

Please check below snippet for more understanding.

$(document).ready(function(){
  $('#remove').click(function(){
    $("input.classname:checkbox:not(:checked)").each(function(){
      $(this).parent().remove();
    });
  });
});
.hide {
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="showdropdowninv" style="display: block;">
  <li><input type="checkbox" value="1" class="selectall"> Select All </li>

  <li class="togglelihere"><input type="checkbox" value="1" class="classname" id="idflesd"> System Name
    <form class="hide">
      <input type="hidden" name="filter" value="SYSTEM_NAME">
      <select name="op" class="xsmall">
        <option value="equal">=</option>
        <option value="notEqual">!=</option>
      </select>
      <input type="text" class="small" name="val">
    </form></li><li class="togglelihere"><input type="checkbox" value="1" class="classname" id="idflesd"> Version Consistency
  <form class="hide">
    <input type="hidden" name="filter" value="VERSION">
    <select name="op" class="xsmall">
      <option value="equal">=</option>
      <option value="notEqual">!=</option>
    </select>
    <input type="text" class="small" name="val">
  </form></li><li class="togglelihere"><input type="checkbox" value="1" class="classname" id="idflesd"> Patch Level Consistency
  <form class="hide">
    <input type="hidden" name="filter" value="PATCH">
    <select name="op" class="xsmall">
      <option value="equal">=</option>
      <option value="notEqual">!=</option>
    </select>
    <input type="text" class="small" name="val">
  </form></li><li class="togglelihere"><input type="checkbox" value="1" class="classname" id="idflesd"> Recovery Mode Consitency
  <form class="hide">
    <input type="hidden" name="filter" value="RECOVERY_MODE_CONSITENCY">
    <select name="op" class="xsmall">
      <option value="equal">=</option>
      <option value="notEqual">!=</option>
    </select>
    <input type="text" class="small" name="val">
  </form></li><li class="togglelihere"><input type="checkbox" value="1" class="classname" id="idflesd"> Maintenance Plans
  <form class="hide">
    <input type="hidden" name="filter" value="MAINTENANCE_PLANS">
    <select name="op" class="xsmall">
      <option value="equal">=</option>
      <option value="notEqual">!=</option>
    </select>
    <input type="text" class="small" name="val">
  </form></li><li class="togglelihere"><input type="checkbox" value="1" class="classname" id="idflesd"> Permissions &amp; Security Consistency
  <form class="hide">
    <input type="hidden" name="filter" value="SECURITY">
    <select name="op" class="xsmall">
      <option value="equal">=</option>
      <option value="notEqual">!=</option>
    </select>
    <input type="text" class="small" name="val">
  </form></li><li class="togglelihere"><input type="checkbox" value="1" class="classname" id="idflesd"> Tuning or Parameter Alignment
  <form class="hide">
    <input type="hidden" name="filter" value="TUNING">
    <select name="op" class="xsmall">
      <option value="equal">=</option>
      <option value="notEqual">!=</option>
    </select>
    <input type="text" class="small" name="val">
  </form></li><li class="togglelihere"><input type="checkbox" value="1" class="classname" id="idflesd"> Monitoring Agents
  <form class="hide">
    <input type="hidden" name="filter" value="MONITORING_AGENTS">
    <select name="op" class="xsmall">
      <option value="equal">=</option>
      <option value="notEqual">!=</option>
    </select>
    <input type="text" class="small" name="val">
  </form></li>                </ul>


<a href="javascript:;" id="remove">Remove selected</a>