How to remove HTML checkboxes using jquery

Question

Have a set of checkboxes as such:

   <div class="checkbox checkbox-inline">
        <label id="test">
            <input type="checkbox" class="icheck" checked value="<?=$skill->name; ?>"> <?=$skill->name; ?>
        </label>
    </div>
   <div class="checkbox checkbox-inline">
        <label id="test">
            <input type="checkbox" class="icheck" checked value="<?=$skill->name; ?>"> <?=$skill->name; ?>
        </label>
    </div>

And i have the following JS

$('#test').on('click', null, function(){
    alert("Clicked");
    $(this).remove();
});

What i am trying is to remove individual checkboxes (with its label) when ever the user click on the label.

I would like to have something like this:

   <div class="checkbox checkbox-inline">
        <label id="test" onClick="removeMe()">
            <input type="checkbox" class="icheck" checked value="<?=$skill->name; ?>"> <?=$skill->name; ?>
        </label>
    </div>

And on my javascript:

function removeMe(){
// Do some AJAX GET/POST
$.ajax....

// and finally
$(this).remove() // i am not sure how to do this....
}

Can anyone point me to the right direction? Thanks

EDIT:

So this is the solution that i use:

function removeMe(object, skillId, personId){
    $.ajax({
        type: 'POST',
        url: SOME_URL_GOES_HERE,
        dataType: 'json',
        data: { skill_id: skillId, person_id: personId },
        success: function(data, textStatus, jqXHR){
            noty({
                text: data.message,
                layout: 'topRight',
                type: data.response
            });
            $(object).remove();
        },
        error: function(data){
            console.log(data);
            noty({
                layout: 'topRight',
                text: 'Failed to delete record, please try again.',
                type: 'error'
            });
        }
    });
}

And as suggested, i use .class instead of id for my .

Answer 1

In your 1st code there is multiple label with same id. There should be unique id for each element that's why you code is not working for 1st code. Give the class or other property instead of the id

And for 2nd code, you should do this:

<div class="checkbox checkbox-inline">
   <label id="test" onClick="removeMe(this)"> <!--pass the object of current element-->
       <input type="checkbox" class="icheck" checked value="<?=$skill->name; ?>"> <?=$skill->name; ?>
   </label>
</div>

And your JS code:

function removeMe(that){
  // Do some AJAX GET/POST
  $.ajax....

  $(that).remove(); 
}

You need to pass the object in the function.

Answer 2

You don't need any inline JS to do this and you cannot have duplicate id's in your page. Remove the id's from the labels and then do this -

$('.icheck').on('change', function() { // captures the change of the checkbox
    $.ajax({
        // stuff..
    }).done(function() { // now that AJAX is done, remove the element
        $(this).closest('label').remove(); // removing the label removes the checkbox too
    });
});

Answer 3

Use remove() on parent(). here is the Fiddle

 $(this).parent().remove();

Also, dont use same ID for multiple items, ID is meant to be unique. Hence updated a bit of HTML

Answer 4

If you want to go with your code you need to pass this as a reference to your element where this refers to the element you've clicked

And you should remove your element after the ajax call so you can try .done() for the ajax completion

Your markup will be like this:

<div class="checkbox checkbox-inline">
    <label id="test" onClick="removeMe(this)"> <!-- added this -->
        <input type="checkbox" class="icheck" checked value="<?=$skill->name; ?>">
        <?=$skill->name; ?>
    </label>
</div>

So your code prototype should be like this

function removeMe(element) { // you will get element here passed as "this" to function call
    $.ajax(function() { 
         // Do some AJAX GET/POST 
     }).done(function() {
            //and finally
            $(element).remove(); // will remove element after ajax call
        });
    }

And a side note IDs must be unique

Answer 5

Just inject this to function

<div class="checkbox checkbox-inline">
    <label id="test" onClick="removeMe(this)">
        <input type="checkbox" class="icheck" checked value="<?=$skill->name; ?>"> <?=$skill->name; ?>
    </label>
</div>

And use it like this:

function removeMe(el){
  // Do some AJAX GET/POST
  $.ajax....

  // and finally
  el.remove() // i am not sure how to do this....
}

Answer 6

I have created a simple fiddle, is this the behavior you want?

http://jsfiddle.net/a74L9/

HTML:

<div id="one" class ="chkbox">
   <label >
       <input type="checkbox" value='One' > AAA
   </label>
</div>
    <div id="two" class ="chkbox">
   <label >
       <input type="checkbox" value='two' > AAA1
   </label>
</div>
        <div id="three" class ="chkbox">
   <label >
       <input type="checkbox" value='three' > AAA2
   </label>
</div>

JQUERY:

 $(".chkbox").click(function(element){
    $(this).remove();
});