Search code examples
javascriptjqueryremoveclass

How to remove input checkbox with jQuery


I have a plugin which generates dynamically a list of categories.
I want to remove the input type checkbox select only from "Country" with jQuery. I have already tried with remove selector (on class .cat-item-15) but couldn't manage to make it work. Only for the specific li which is "Country". This way it removes all.

Is it possible to be applied only on "Country" li ?

I tried this way :

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

And here is the code I need to alter :

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

Solution

  • You should be able to use

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

    or

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

    jsFiddle example

    When you tried $(".cat-item-15 :checkbox").remove(); it failed because it selects all checkboxes that are descendants of any element with the class of cat-item-15, which was obviously too many.

    :checkbox[value='15'] only selects checkboxes that have a value attribute of 15, and .first() just selects the first checkbox, so given your code either should work.