当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - How to remove HTML checkboxes using jquery

问题描述:

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 .

网友答案:

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

网友答案:

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.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();
});
分享给朋友:
您可能感兴趣的文章:
随机阅读: