Javascript .remove（）函数未按预期运行jquery

在我的项目中，我有一系列输入，都是单选按钮类型。我想添加一些功能，只需单击小气泡（单选按钮所代表的气泡）即可删除这些输入。这是我的代码，我可以这样做：

$('#newAnswers input').click(function(){ 
    var $textToDelete = $(this).val();
    $(this).remove();
});

我之所以要将单选按钮的值赋给

textToDelete

变量，是因为通常在HTML中有单选按钮时，旁边会有文本来描述单选按钮的用途。我正在创建一个变量来保存这个值，这样我就可以从div中手动删除它，因为上面的代码只用于删除单选按钮，而不是它旁边的描述（或者我想你也可以称它为值）。上面的代码也按预期工作。但是，一旦我实现了删除单选按钮旁边的描述（或值）的功能，代码就不能按预期工作。以下是我的实现：

$('#newAnswers input').click(function(){ 
    var $textToDelete = $(this).val();
    $(this).remove();

    // NEW LINE
    $('#newAnswers').html($('#newAnswers').html().replace($textToDelete, ''));
});

使用此单击功能，单击单选按钮后将删除，但如果单击第二个、第三个或第四个等，单选按钮将不会删除。事实上，单击它们只会填充它们（或使它们冒泡），就好像您通常只是选择一个单选按钮一样。但是，使用此功能单击的第一个单选按钮按预期工作。然而，任何单选按钮，你点击后，将不会删除，我不知道为什么

HTML结构：

<div id='newAnswers'>
    <input type="radio" value="answer1" name="question">answer1<br>
    <input type="radio" value="answer2" name="question">answer2<br>
    <input type="radio" value="answer3" name="question">answer3<br>
    <input type="radio" value="answer4" name="question">answer4<br>
</div>

回答1

回答2

回答3

回答4

如果要删除DOM元素，可以使用

.remove（）

函数。这是

.remove（）

$（文档）.ready（函数（）{
$（'.removebut'）。单击（函数（）{
$（'.removeme'）.remove（）；
});
})

单击以删除我
删除

您可以在文本中添加span

<input type="radio" value="answer1" name="question"><span>answer1</span><br>

---

这样修改HTML似乎不是个好主意。为什么不让一个单独的元素包含描述并删除相邻的元素呢？请向我们展示HTML结构好吗？将按钮和文本都包含在一个单独的元素（div或span）中，然后在单击处理程序中，删除父元素，它将删除两个内部元素。甚至连一个片段都没有？

$('#newAnswers input').click(function(){ 
    $(this).next().remove();
    $(this).remove();
});