如何使用 jQuery 删除输入复选框

Question

我有一个动态生成类别列表的插件。
我只想从 "Country" 和 jQuery 中删除输入类型复选框 select。我已经尝试使用 remove selector (on class .cat-item-15) 但无法使其工作。仅针对特定的 li 即 "Country"。这样它就删除了所有。

是否可以只应用于"Country" 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 的 class 元素的后代复选框，这显然太多了。

:checkbox[value='15'] 只选择 value 属性为 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();

根据附近的内容定位元素

由于您要定位包含 "Country" 的元素，您可以使用 :contains() 选择器找到包含该元素的特定 <label> 并将其完全删除：

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

Answer 5

您的方法无效，因为 HTML 的结构方式，所有其他项目都嵌套在初始 <li> 中。因此，如果您删除该父级 <li>，其中的所有项目也将被删除。

如果你只想删除输入复选框，你可以这样做：

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

如果您也需要"Country"这个词消失，那么：

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

谢谢！

如何使用 jQuery 删除输入复选框

How to remove input checkbox with jQuery

javascript

jquery

removeclass