如何用jQuery移除包含ID为aucune的复选框的div容器？

嘿，我看你在处理动态生成的复选框，想移除包含id为aucune的复选框的div容器，你的现有代码有几个小细节需要调整，咱们一步步来搞定它！

先看看你原来的代码：

// 等待DOM加载完成
$(document).ready(function() {
var empty = $("input:checkbox[id=aucune]");
if (empty == true) {
$(this).parent().remove();
}
});

问题分析 #

• jQuery选择器返回的是jQuery对象，哪怕没有匹配到元素，它也不是false，所以if (empty == true)这个判断永远不会触发。正确的检查方式是判断对象的length属性是否大于0，来确认元素是否存在。
• 代码里的$(this)上下文不对，它指向的是document，不是你选中的复选框，所以没法正确获取它的父div。

修正后的代码 #

先给你一个清晰的修正版本：

$(document).ready(function() {
  // 选中id为aucune的复选框，用ID选择器更高效
  var $targetCheckbox = $('#aucune');
  // 检查元素是否存在
  if ($targetCheckbox.length > 0) {
    // 获取父容器并移除
    $targetCheckbox.parent().remove();
  }
});

更精简的写法 #

其实jQuery有个很贴心的特性：如果调用方法的元素不存在，它会直接跳过不执行，不会报错。所以你完全可以省略判断步骤，直接写成：

$(document).ready(function() {
  // 一步到位：如果#aucune存在，就移除它的父div；不存在就啥也不做
  $('#aucune').parent().remove();
});

动态元素的特殊处理 #

如果你的复选框是动态生成的（比如通过AJAX加载、或者页面加载后用JS添加的），那$(document).ready()会在元素生成前就执行，这时候就需要把移除代码放在元素生成之后执行。举个AJAX的例子：

$.ajax({
  url: '你的数据接口地址',
  success: function(response) {
    // 先把动态内容插入页面
    $('.container').html(response);
    // 内容插入完成后，再执行移除操作
    $('#aucune').parent().remove();
  }
});

内容的提问来源于stack exchange，提问作者Anthony Salamin