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

使用此单击功能，单击单选按钮后，它将删除，但如果单击一秒，或三分之一或四分之一，则单选按钮将不会删除。实际上，点击它们只会填充它们（或将它们冒泡），就好像你只是正常选择一个单选按钮一样。但是，使用此功能单击的FIRST单选按钮可以按预期工作。但是，之后单击的任何单选按钮都不会删除，我不知道原因。

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>

Answer 1

如果要删除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>

Answer 2

您可以在文本中添加范围

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

然后

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

.remove（）函数无法正常工作jquery

2 个答案: