Javascript 如何使用jquery删除HTML复选框

具有一组复选框，例如：

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

我尝试的是在用户单击标签时删除单个复选框（及其标签）

我想要这样的东西：

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

<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(el){
  // Do some AJAX GET/POST
  $.ajax....

  // and finally
  el.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作为我的。在您的第一个代码中，有多个标签具有相同的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>

---

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

在您的第一个代码中，有多个具有相同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>

---

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

如果要使用代码，则需要传递

此

作为对元素的引用，其中

此

指的是您单击的元素

您应该在ajax调用之后删除元素，以便尝试ajax完成

您的标记将如下所示：

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

<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(el){
  // Do some AJAX GET/POST
  $.ajax....

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

---

如果你想使用你的代码，你需要传递

这个
作为你元素的参考，其中
这个
指的是你点击的元素

您应该在ajax调用之后删除元素，以便尝试ajax完成

您的标记将如下所示：

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

<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(el){
  // Do some AJAX GET/POST
  $.ajax....

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

并且旁注IDs必须是唯一的
这样做不需要任何内联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
    });
});

您不需要任何内联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
    });
});

在
parent（）
上使用
remove（）
。这是你的电话号码

另外，不要对多个项目使用相同的
ID
，
ID
是唯一的。因此，在
parent（）
上使用
remove（）
更新了一点
HTML
。这是你的电话号码

另外，不要对多个项目使用相同的
ID
，
ID
是唯一的。因此，更新了一点
HTML
只需将
这个
注入到函数中即可

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

只需将此
注入函数即可

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

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


HTML:

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


HTML:

编辑：删除我之前的注释，但以下内容仍然正确：您可能希望将
删除
放在
完成
或
成功
调用的
$.ajax
方法中。请参阅：您不应该对多个元素使用相同的ID。。ID是唯一的。改用类…@CodeLღver I只能删除第一个元素，因为每个元素使用相同的IDelement@BrentWaggoner是的，你说得对。但我仍在为如何移除该元素而挣扎individually@JeremyRIrawan指定类或其他属性而不是id。您也可以检查我的答案。编辑：在删除我的属性之前进行注释，但以下内容仍然正确：您可能希望将
删除
放在
完成
或
成功
方法中
$.ajax
调用。请参阅：您不应该对多个元素使用相同的ID。。ID是唯一的。改用类…@CodeLღver I只能删除第一个元素，因为每个元素使用相同的IDelement@BrentWaggoner是的，你说得对。但我仍在为如何移除该元素而挣扎individually@JeremyRIrawan提供类或其他属性而不是id。您也可以检查我的答案。修复您的链接，bud.：）@凯西福尔克-更新链接。谢谢你的链接，巴德。：）@凯西福尔克-更新链接。感谢您的快速响应。我决定用你的答案。虽然Jay和Dhaval的也正确。谢谢你的快速回复。我决定用你的答案。虽然Jay和Dhaval的答案也正确。谢谢Jay，你的答案也正确，但是我必须接受Love的答案。谢谢Jay，你的答案也正确，但是我必须接受Love的答案。