.remove() 函数未按预期工作 jquery

Question

在我的项目中，我有一系列输入，都是单选按钮类型。我想添加功能，只需单击小气泡(单选按钮的气泡)即可删除这些输入。这是我的代码，以便我可以执行此操作：

$('#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, ''));
});

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

网页结构：

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

Answer 1

您可以为文本添加span，

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

然后

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

Answer 2

如果要删除 DOM 元素，可以使用.remove()函数。 这是.remove()的用法

$(document).ready(function(){
$('.removebut').click(function(){
$('.removeme').remove();
});
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="removeme">Click to remove me</div>
<button class="removebut">Remove</button>

或者，如果要删除输入的值，可以使用jquery.val()函数将值设置为"。

.val()的使用

$(document).ready(function(){
$('.removebut').click(function(){
$('.removeme').val("");
});
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="removeme" value="Click To Remove"/>
<button class="removebut">Remove</button>