1. 首页
  2. 问答
  3. 如何删除未选中的复选框的父元素在jQuery的

如何删除未选中的复选框的父元素在jQuery的

2016-09-19 52 views
0

My Fiddle如何删除未选中的复选框的父元素在jQuery的

我需要删除未选中的复选框的项目。我不知道我要去哪里错。有些项目只能删除，我不知道为什么？

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

只需检查一些复选框，然后单击删除链接。

来源

2016-09-19 Question User

回答

2

删除链接循环的onclick上课“类名”删除它们通过所有选中的复选框使用$("input.classname:checkbox:not(:checked)").each(function(){和删除它的父母使用$(this).parent().remove();。

请检查以下代码片段以获得更多理解。

$(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>

来源

2016-09-19 13:27:18

+0

我需要删除它的不选中的checkobx我该怎么做？ –

+0

这听起来像你试图删除被检查的项目，这是否 – depperm

+0

我编辑我的问题请检查它@depperm –

1

用$('input[type="checkbox"]').each(function(i, v){}循环所有复选框。检查使用$(v).prop('checked')选中的复选框，然后找到自己的父母和使用$(this).parent().remove();

$(document).ready(function(){ 
 
    $('#remove').click(function(){ 
 
    $('input[type="checkbox"]').each(function(i, v){ 
 
    
 
    \t if(!$(v).prop('checked')) { 
 
    \t $(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> 
 
\t \t \t \t 
 
\t \t \t \t <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"> 
 
\t \t \t </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"> 
 
\t \t \t </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"> 
 
\t \t \t </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"> 
 
\t \t \t </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"> 
 
\t \t \t </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"> 
 
\t \t \t </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"> 
 
\t \t \t </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"> 
 
\t \t \t </form></li>    </ul> 
 
     
 
     
 
     <a href="javascript:;" id="remove">Remove selected</a>

来源

2016-09-19 13:26:13

+0

我需要删除取消选中checkobx在这我怎么能做到这一点做呢？ –

+0

如果（if（！$（v）.prop（'checked'））' –

+0

你的问题听起来像你需要删除选中的复选框，无论如何，我编辑我的回答 –

0

遍历classname类，然后除去这些元素没有属性checked

$(document).ready(function() { 
 
    $('#remove').click(function() { 
 
    $('.classname').each(function() { 
 
     if ($(this).prop('checked') == false) { 
 
     $(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>

来源

2016-09-19 13:32:00 depperm

0 
//Remove items which are unchekced 
$('input[type="checkbox"].classname') 
    .not(":checked") 
    .parent('li') 
    .remove(); 

//To remove checked items only 
$('input[type="checkbox"].classname:checked') 
    .parent('li') 
    .remove();

试试这个片段。

我不认为每个循环都需要达到相同的效果。

$(document).ready(function(){ 
 
    $('#remove').click(function(){ 
 
    //Remove items which are unchecked 
 
    $('input[type="checkbox"].classname') 
 
     .not(":checked") 
 
     .parent('li') 
 
     .remove(); 
 
    }); 
 
    //Check all functionality 
 
    $('.selectall').click(function(){ 
 
    $('input[type="checkbox"].classname') 
 
     .prop('checked', $(this).is(":checked")); 
 
    }); 
 
}); 
 

 
//To remove checked items only 
 
//$('input[type="checkbox"].classname:checked').parent('li').remove();
<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> 
 
\t \t \t \t 
 
\t \t \t \t <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"> 
 
\t \t \t </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"> 
 
\t \t \t </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"> 
 
\t \t \t </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"> 
 
\t \t \t </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"> 
 
\t \t \t </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"> 
 
\t \t \t </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"> 
 
\t \t \t </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"> 
 
\t \t \t </form></li>    </ul> 
 
     
 
     
 
     <a href="javascript:;" id="remove">Remove selected</a>

来源

2016-09-19 13:34:28

0

您可以has和not选择

$("li:has(:checkbox:not(:checked))").remove()

来源

2016-09-19 13:36:21 epascarello

+0

虽然这很好，但他的第一个'li'元素没有类'classname'，这将删除第一个元素 – depperm

+0

so li。xxxxx可以加在 – epascarello

+0

之前，不是'has'，因为'classname'是复选框而不是li – depperm

相关问题

 相关问题