Javascript 切换按钮时如何删除文本输入？

对于“是”、“否”、“真”和“假”按钮，我没有完全正确的测试输入。您可以自己查看和测试。请按照以下步骤操作：

单击“打开网格”并选择按钮“真或假”，“真”和“假”按钮将出现

单击按钮“True”，按钮将变为绿色，您将看到下面该按钮的文本输入。这很好

现在点击“False”按钮，“False”按钮打开，“True”按钮关闭（返回为白色）。现在好的是出现了“假”文本输入，坏的是它没有删除“真”文本输入

因此，我的问题是，如果用户单击“真”或“假”或“是”或“否”的备选按钮，我希望刚刚关闭的按钮将其输入删除

如何做到这一点

以下是添加和删除输入的功能：

      function btnclick(btn)
{
    var context = $(btn).parents('#optionAndAnswer');
    if (context.length == 0) {
        context = $(btn).parents('tr');
    }
    var $btn = $(btn);
    var value = btn.value;
    var id = $btn.attr('id');

    var $otherYNBtn = value === "Yes" ? $(context.find("input[value='No']")) : $(context.find("input[value='Yes']"));
    var $otherTFBtn = value === "True" ? $(context.find("input[value='False']")) : $(context.find("input[value='True']"));


    if ($(context.find("input[value='Yes']")).hasClass('answerBtnsOn')) {
        $otherYNBtn.removeClass('answerBtnsOn').addClass('answerBtnsOff');
    }

    else if ($(context.find("input[value='No']")).hasClass('answerBtnsOn')) {
        $otherYNBtn.removeClass('answerBtnsOn').addClass('answerBtnsOff');
    }

    if ($(context.find("input[value='True']")).hasClass('answerBtnsOn')) {
        $otherTFBtn.removeClass('answerBtnsOn').addClass('answerBtnsOff');
    }

    else if ($(context.find("input[value='False']")).hasClass('answerBtnsOn')) {
        $otherTFBtn.removeClass('answerBtnsOn').addClass('answerBtnsOff');
    }


    if ($(btn).hasClass('answerBtnsOff')) {
        var n = $("input[name='" + id + "value']").length;
        var hid = "hidden" + id + n + "value";  
        $(btn).attr("data-hid", hid);

        // append those values to the form
        var input = '<input type="text" id="' + hid + '" value="' + value + '" name="' + id + 'value" />';
        $('#QandA').append(input);      
        // toggle the button
        $btn.removeClass('answerBtnsOff').addClass('answerBtnsOn'); 
    // do the opposite - remove the input
    }
    else {
        $("#" + $(btn).attr("data-hid")).remove();
        $btn.removeClass('answerBtnsOn').addClass('answerBtnsOff');
    }  


    $('.answertxt', context).val(context.find('.answerBtnsOn').length > 0 ? context.find('.answerBtnsOn').length : 0);

    return false;
}

功能btn点击（btn）
{
变量上下文=$（btn）.parents（'optionandswer'）；
if（context.length==0）{
上下文=$（btn）.parents（'tr'）；
}
变量$btn=$（btn）；
var值=btn.value；
变量id=$btn.attr（'id'）；
var$otherYNBtn=value==“是”？$（context.find（“输入[value='No']”）：$（context.find（“输入[value='Yes']”）；
var$otherTFBtn=value==“True”？$（context.find（“输入[value='False']”）：$（context.find（“输入[value='True']）））；
if（$（context.find（“input[value='Yes']））.hasClass（'answerBtnsOn'））{
$otherYNBtn.removeClass（'answerBtnsOn'）.addClass（'answerBtnsOff'）；
}
else if（$（context.find（“input[value='No']））.hasClass（'answerBtnsOn'））{
$otherYNBtn.removeClass（'answerBtnsOn'）.addClass（'answerBtnsOff'）；
}
if（$（context.find（“input[value='True']））.hasClass（'answerBtnsOn'））{
$otherTFBtn.removeClass（'answerBtnsOn'）.addClass（'answerBtnsOff'）；
}
else if（$（context.find（“input[value='False']））.hasClass（'answerBtnsOn'））{
$otherTFBtn.removeClass（'answerBtnsOn'）.addClass（'answerBtnsOff'）；
}
if（$（btn）.hasClass（'answerBtnsOff'））{
var n=$（“输入[name='”+id+“value']”）长度；
var hid=“隐藏”+id+n+“值”；
$（btn）.attr（“数据隐藏”，隐藏）；
//将这些值附加到表单中
var输入=“”；
$（'#QandA'）。追加（输入）；
//切换按钮
$btn.removeClass（'answerBtnsOff'）。addClass（'answerBtnsOn'）；
//执行相反的操作-删除输入
}
否则{
$（“#”+$（btn）.attr（“数据隐藏”）.remove（）；
$btn.removeClass（'answerBtnsOn'）.addClass（'answerBtnsOff'）；
}  
$（'.answertxt'，context.val（context.find（'.answerBtnsOn'）.length>0？context.find（'.answerBtnsOn'）.length:0）；
返回false；
}

以下是“真”、“假”、“是”和“否”按钮：

3.答复

我建议保留一个问题计数计数器，这样每个选项和答案框都有一个id，这样您就可以在添加新框之前从中删除任何现有框。这还允许您追溯更新它（在添加第四个问题后设置第三个问题）

以下是针对您的JSFIDLE的解决方案：

---

总的来说，你的方法不是最好的方法，但我没有时间从头开始。下一次，我会考虑把你的问题和答案放到课堂上，并只为这些值保持一个全局数组。通过这种方式生成Html代码将更容易与实际值和重要属性分离。

你能给我看一个关于如何设置计数器的示例代码吗？如果你不介意的话，这将对我非常有帮助：）我可以看到它是如何完成的，以备将来使用。单击“True”后，Html（）会将我带到另一个页面例如，文本输入将显示在另一个页面上。我应该使用.html（“”）以外的东西吗？实际上我尝试了.append（“”），但它仍然没有解决切换按钮时删除文本输入的问题。它会将您带到另一个页面？如果您使用.append将这些添加到#QandA区域，那么jQuery（'#QandA'）.html（''）将清空该div。它不应该带您进入新页面。好的，给我们10分钟的时间来设置fiddle。好的，我已经设置了JSFIDLE，它是。我减少了代码，这对你来说更容易。我只包括按钮“真”或“假”。您可以通过单击“添加问题”按钮来追加行。我可以请你帮个大忙吗，你不必这么做，但我想知道你是否可以在你的修复代码中包含某种计数，这样我们就知道哪个文本输入属于哪个按钮了？这实际上是saml在回答这个问题时所说的

 <table id="optionAndAnswer" class="optionAndAnswer">
    <tr>
    <tr class="answer">
    <td>3. Answer</td>
    <td>
    <table id="answerSection">
  <tr>
<td>
<input class="answerBtns answers answerBtnsOff" name="answerName[True]"  id="answerTrue"    type="button"   value="True"    onclick="btnclick(this);"/>
<input class="answerBtns answers answerBtnsOff" name="answerName[False]" id="answerFalse"   type="button"   value="False"   onclick="btnclick(this);"/>
<input class="answerBtns answers answerBtnsOff" name="answerName[Yes]"   id="answerYes"     type="button"   value="Yes"     onclick="btnclick(this);"/>
<input class="answerBtns answers answerBtnsOff" name="answerName[No]"    id="answerNo"      type="button"   value="No"      onclick="btnclick(this);"/>
</td>
</tr>
    </table>
    </td>
    </tr>
    </table>