1. 首頁
  2. 問答
  3. 如何刪除未選中的複選框的父元素在jQuery的

如何刪除未選中的複選框的父元素在jQuery的

2016-09-19 49 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

相關問題

 相關問題