如何刪除與jQuery輸入複選框

Question

我有一個插件，它動態生成一個類別列表。
我想刪除輸入類型複選框選擇只有從「國家」與jQuery。我已經嘗試使用刪除選擇器（類.cat-item-15），但無法使其工作。僅限於「國家」的具體li。這樣它將刪除所有。

是否可以僅適用於「國家」li？

我試着這樣說：

$(".cat-item-15 :checkbox").remove(); 

這裏是我需要改變代碼：

<li class="cat-item cat-item-15"> 
    <label><input type="checkbox" name="ofait-items[]" value="15"> Country</label> 
    <ul class="children"> 
    <li class="cat-item cat-item-53"> 
     <label><input type="checkbox" name="ofait-items[]" value="53"> Canada</label> 
    </li> 
    <li class="cat-item cat-item-47"> 
     <label><input type="checkbox" name="ofait-items[]" value="47"> United Kingdom</label> 
    </li> 
    <li class="cat-item cat-item-52"> 
     <label><input type="checkbox" name="ofait-items[]" value="52"> USA</label> 
    </li> 
    </ul> 
</li> 

Answer 1

您應該能夠使用

$(".cat-item-15 :checkbox").first().remove(); 

或

$(".cat-item-15 :checkbox[value='15']").remove(); 

jsFiddle example

當你試圖$(".cat-item-15 :checkbox").remove();它失敗，因爲它選擇與類的cat-item-15，這顯然太多的任何元素的後裔所有複選框。

:checkbox[value='15']只會選擇值爲15的複選框，.first()只會選擇第一個複選框，因此您的代碼應該可以工作。

Answer 2

$('.cat-item-15 :checkbox').css("display") == "none"; 

或

$('.cat-item-15 :checkbox').hide(); 

Answer 3

你應該使用下面的代碼：

$(".cat-item-15 input[type='checkbox']").remove(); 

這是因爲，在輸入的cat-item-15一個孩子。

Answer 4

您可以考慮以幾種方式定位元素。

目標元素根據其值

jQuery的支持attribute-based selectors這將允許您根據它的一個價值目標的特定元素的屬性，所以在這種情況下，你可以使用：

$('.cat-item-15 :checkbox[value="15"]').remove(); 

基於其位置

既然你知道這將是第一個複選框目標元素出現，你可以通過使用:first選擇刪除：

$('.cat-item-15 :checkbox:first').remove(); 

目標元素基於鄰近內容

既然你要定位包含「國家」的元素，你可以使用:contains()選擇地發現，包含特定<label>和完全刪除它：

$('.cat-item-15 label:contains("Country")').remove(); 

Answer 5

你的做法並沒有因爲HTML是ST的工作方式所有其他項目嵌套在初始<li>內。因此，如果您刪除該父母<li>，則其中的所有項目也將被刪除。

如果要刪除剛剛輸入的複選框，你可以這樣做：

$(".cat-item-15 :checkbox").first().remove();

如果你需要的單詞「國家」消失爲好，然後：

$(".cat-item-15 label").first().remove();

應該工作，我認爲。

Answer 6

試試這個：

$('.cat-item label:contains(Country) input').remove()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li class="cat-item cat-item-15"><label><input type="checkbox" name="ofait-items[]" value="15"> Country</label> 
 
    <ul class="children"> 
 
    <li class="cat-item cat-item-53"><label><input type="checkbox" name="ofait-items[]" value="53"> Canada</label> 
 
    </li> 
 
    <li class="cat-item cat-item-47"><label><input type="checkbox" name="ofait-items[]" value="47"> United Kingdom</label> 
 
    </li> 
 
    <li class="cat-item cat-item-52"><label><input type="checkbox" name="ofait-items[]" value="52"> USA</label> 
 
    </li> 
 
    </ul> 
 
</li>

Answer 7

您可以使用下面的代碼清除複選框在國家

$(".cat-item-15").children("label").children("input").remove() 

Answer 8

您可以使用直接子選擇器，如果結構需要相同和值可能是可變的：

$(".cat-item-15 > label input:checkbox").remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li class="cat-item cat-item-15"> 
 
    <label><input type="checkbox" name="ofait-items[]" value="15"> Country</label> 
 
    <ul class="children"> 
 
    <li class="cat-item cat-item-53"> 
 
     <label><input type="checkbox" name="ofait-items[]" value="53"> Canada</label> 
 
    </li> 
 
    <li class="cat-item cat-item-47"> 
 
     <label><input type="checkbox" name="ofait-items[]" value="47"> United Kingdom</label> 
 
    </li> 
 
    <li class="cat-item cat-item-52"> 
 
     <label><input type="checkbox" name="ofait-items[]" value="52"> USA</label> 
 
    </li> 
 
    </ul> 
 
</li>

如果HTML的結構可以改變，但是值保持不變，那麼你可以使用：

$(".cat-item-15 :checkbox[value='15']").remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li class="cat-item cat-item-15"> 
 
    <label> 
 
    <input type="checkbox" name="ofait-items[]" value="15">Country</label> 
 
    <ul class="children"> 
 
    <li class="cat-item cat-item-53"> 
 
     <label> 
 
     <input type="checkbox" name="ofait-items[]" value="53">Canada</label> 
 
    </li> 
 
    <li class="cat-item cat-item-47"> 
 
     <label> 
 
     <input type="checkbox" name="ofait-items[]" value="47">United Kingdom</label> 
 
    </li> 
 
    <li class="cat-item cat-item-52"> 
 
     <label> 
 
     <input type="checkbox" name="ofait-items[]" value="52">USA</label> 
 
    </li> 
 
    </ul> 
 
</li>

謝謝！