CODEWITHSUNDEEP
jquery
user844589
user844589

Reputation:

Need checkbox with label delete function in jquery

I have a set of check boxes with labels. You will check any checkbox and click delete button, that checkbox & label should be deleted.

My code will delete checkbox only, that corresponding label not deleted. I need to delete the both checkbox and label. My code is

<input type="checkbox" id="check1" /><label>Do you like summer?</label><br>
<input type="checkbox" id="check2" /><label>Do you like winter?</label><br>
<input type="checkbox" id="check3" /><label>Do you like both</label><br>
<input type="checkbox" id="check4" /><label>other</label><br>
<button>delete</button>

<script>

    $("button").click(function () {
     $("#"+$(":checked").remove());
    });

</script>

Upvotes: 1

Views: 518

Answers (2)

GolezTrol
GolezTrol

Reputation: 116110

Those checkboxes don't have labels. A label should have the for="checkX" attribute to be linked to checkbox. If you do that, it makes it easier too, to select the label for a checkbox, because you can write a selector like this:

$("label[for='check1']").remove();

Of course you van find the label, as demonstrated in Nicola Peluchetti's answer, but it's better to give the label a 'for' attribute. It improves accessability to your website too. It is actually the purpose of a label to be linked to an input element. Without this link, you could have used a span just as well.

[Edit]

Asking for A, B, Both or None is pretty confusing when using checkboxes. You could do with just A and B, or you could use radiobuttons. Now, someone could select both 'A' and 'Both'.

Upvotes: 1

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76880

you could do:

   $("button").click(function () {
       var c = $(":checked");
       c.next('label').remove();
       c.remove()
    });

If you want to remove also the <br> you could do:

   $("button").click(function () {
       var c = $(":checked");
       c.nextUntil(':checkbox').not('button').remove();
       c.remove()
    });

fiddle http://jsfiddle.net/nUjHN/

Upvotes: 0

Related Questions