admin管理员组

文章数量:1435859

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 .

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 .

• javascript
• jquery
• html
• checkbox

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Aug 6, 2014 at 12:07 JeremyJeremy 2,54688 gold badges4848 silver badges8383 bronze badges 5

• Edit: ment before mine was deleted but the following is still true: you'll probably want to put the remove in the plete or success method of the $.ajax call. See: api.jquery./jQuery.ajax – Brent Waggoner Commented Aug 6, 2014 at 12:12
• 11 You should never use the same ID for multiple elements.. The ID is unique. Use a class instead... – Marco Bonelli Commented Aug 6, 2014 at 12:12
• @CodeLღver I can only remove the first element, due to using the same ID for each element – Jeremy Commented Aug 6, 2014 at 12:14
• @BrentWaggoner Yes, you are right. But i am still struggling on how to remove the element individually – Jeremy Commented Aug 6, 2014 at 12:14
• @JeremyRIrawan give the class or other property instead of the id. you can check my answer also. – Code Lღver Commented Aug 6, 2014 at 12:16

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 2

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.

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
    });
});

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

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 pletion

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

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

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

http://jsfiddle/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();
});

本文标签： javascriptHow to remove HTML checkboxes using jqueryStack Overflow