javascript - 如何使用 jquery 删除 HTML 复选框

Question

有一组复选框，如下所示:

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

我有以下 JS

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

我正在尝试的是当用户单击标签时删除单个复选框(及其标签)。

我想要这样的东西:

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

在我的 javascript 上:

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

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

有人能指出我正确的方向吗？谢谢

编辑:

这就是我使用的解决方案:

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

按照建议，我使用 .class 而不是我的 id 。

Answer 1

在您的第一个代码中，有多个具有相同 id 的标签。 每个元素应该有唯一的 id，这就是您的代码不适用于第一个代码的原因。提供类或其他属性而不是 id

对于第二个代码，您应该这样做:

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

还有你的 JS 代码:

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

  $(that).remove(); 
}

您需要在函数中传递对象。