Question

我有一个动态生成类别列表的插件我想删除输入类型复选框仅选择＆＃34; Country＆＃34;用jQuery。我已经尝试使用删除选择器（在课程.cat-item-15上），但无法使其工作。仅适用于＆＃34;国家＆＃34;的特定li。这样它就会删除所有。

是否可以仅应用于＆＃34;国家＆＃34; 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

您可以考虑以多种方式定位元素。

根据其价值定位元素

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 2

你应该可以使用

max-width: 1200px;

或

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

<强> jsFiddle example

当您尝试$(".cat-item-15 :checkbox[value='15']").remove();时，它失败了，因为它选择了所有复选框，这些复选框是$(".cat-item-15 :checkbox").remove();类的任何元素的后代，显然太多了。

cat-item-15仅选择值属性为15的复选框，而:checkbox[value='15']只选择第一个复选框，因此您的代码应该可以正常工作。

Answer 3

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

或

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

Answer 4

您应该使用以下代码：

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

之所以如此，是因为输入是cat-item-15的孩子。

Answer 5

您的方法不起作用，因为HTML的结构方式，所有其他项目都嵌套在最初的<li>中。因此，如果删除该父<li>，则其中的所有项目也将被删除。

如果您只想删除输入复选框，可以执行以下操作：

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

如果您还需要“国家”一词消失，那么：

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

我认为应该工作。

Answer 6

试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

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删除输入复选框

8 个答案: