编辑：

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

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

Answer 2

您不需要任何内联JS来执行此操作，并且您的页面中不能包含重复的ID。从标签中删除ID，然后执行此操作 -

$('.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

在remove()上使用parent()。这是Fiddle

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

此外，对于多个项目不要使用相同的ID，ID应该是唯一的。因此更新了一点HTML

Answer 4

如果您想使用代码，则需要将this作为对this引用您点击的元素的元素的引用传递

你应该在ajax调用后删除你的元素，这样你就可以尝试.done()来完成ajax

你的标记将是这样的：

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

所以你的代码原型应该是这样的

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

旁注 ID 必须唯一

Answer 5

只需将this注入功能

即可

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

并像这样使用它：

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

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

Answer 6

我创造了一个简单的小提琴，这是你想要的行为吗？

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

如何使用jquery删除HTML复选框

编辑：

6 个答案: