jQuery中.remove()函数未按预期工作：单选按钮点击删除失效

嘿，我看了你这段实现单选按钮点击删除的代码，思路是对的，但可能还有几个可以优化的地方，刚好能更贴合你说的「点击单选按钮的气泡（也就是附带的文本区域）」来删除的需求～

先说说你现有代码的小局限：你现在给#newAnswers下的所有单选框input绑定了点击事件，点击后删除当前input元素。但通常单选按钮的文本是放在<label>标签里的，要么和input嵌套在一起，要么通过for/id关联。如果只删input的话，对应的文本会留在页面上，看起来就很突兀了。

下面给你两种对应不同HTML结构的优化方案：

方案1：label包裹input+文本（最常用的结构） #

如果你的HTML是这种嵌套结构：

<div id="newAnswers">
  <label>
    <input type="radio" name="answer" value="选项1"> 选项1
  </label>
  <label>
    <input type="radio" name="answer" value="选项2"> 选项2
  </label>
</div>

我们可以把点击事件直接绑定到label上，这样不管用户点单选框还是旁边的文本气泡，都能把整个选项一起删掉：

$('#newAnswers label').click(function(e) {
  // 阻止单选按钮的默认选中行为（如果不需要先选中再删除的话）
  e.preventDefault();
  // 删除整个label元素，input和文本会一起被移除
  $(this).remove();
});

方案2：label与input通过for/id关联 #

如果你的HTML是分开关联的结构：

<div id="newAnswers">
  <input type="radio" name="answer" id="ans1" value="选项1">
  <label for="ans1">选项1</label>
  
  <input type="radio" name="answer" id="ans2" value="选项2">
  <label for="ans2">选项2</label>
</div>

这时候需要同时给input和label绑定事件，确保点击任意一个都能把对应的元素一起删除：

// 点击单选框时删除自身和关联的label
$('#newAnswers input[type="radio"]').click(function(e) {
  e.preventDefault();
  const $input = $(this);
  const $label = $(`label[for="${$input.attr('id')}"]`);
  $input.remove();
  $label.remove();
});

// 点击文本label时删除自身和关联的单选框
$('#newAnswers label').click(function(e) {
  e.preventDefault();
  const $label = $(this);
  const $input = $(`#${$label.attr('for')}`);
  $label.remove();
  $input.remove();
});

小补充 #

如果你确实只需要点击单选按钮本身来删除，那你原来的代码是可以用的，但记得要把关联的label也一起删掉，避免页面残留文本。另外，e.preventDefault()是用来阻止单选框的默认选中行为的——毕竟点击后直接删除了，选中状态也就没意义了；如果你的需求是先选中再删除，把这行删掉就行。

内容的提问来源于stack exchange，提问作者Angel Garcia