使用JavaScript从DOM中删除表单

我有三个单选按钮。。单击时的每个单选按钮都会显示一个独立的窗体。当我单击单选按钮时，我需要从DOM中删除表单。还有第三个还没有准备好。当我单击第一个单选按钮时，只显示它的表单，其他两个从DOM中删除。其他的也一样。 我对JavaScript不是很了解

Html:

---

如果无法更改DOM元素并在其中添加类，我的答案是将事件侦听器附加到每个按钮：

'use strict';    
var button1 = document.getElementById('toggle-tab1'),
    button2 = document.getElementById('toggle-tab2'),
    button3 = document.getElementById('toggle-tab3');

button1.addEventListener('click', function () {
   // Code that takes it away (hide DOM elements or whatever you need)
});

另一方面，更好的方法是向所有无线电输入添加一个函数，然后根据输入无线电的ID或值，您可以更改行为：

<input type="radio" name="tabs" onclick="handleClick(this)" value="first" id="toggle-tab1" checked="checked" />

这应该能奏效

<form action="{% url "backtest" %}" method='POST' role='form' id='form'>
                  {% csrf_token %}

                <div id="tabs">


                 <input type="radio" name="tabs" value="first" id="toggle-tab1"  checked="checked" />
                 <label for="toggle-tab1">Long</label>

                 <input type="radio" name="tabs" value="second" id="toggle-tab2"     />
                 <label for="toggle-tab2">Short</label>

                 <input type="radio" name="tabs" value="third" id="toggle-tab3"   />
                 <label for="toggle-tab3">Long and Short</label>
                 <div id="tab1" class="tab"  >

                    <!-- first form will show when page load -->
                     <fieldset id="first" class="toggle">
                     {% include 'tags/parameters_form.html' %}
                     </fieldset>
                    <fieldset disabled id="second" class="toggle">
                          {% include 'tags/parameters_form.html' %}
                     </fieldset>
                     <fieldset disabled id="third" class="toggle">
                         {% include 'tags/parameters_form.html' %}
                     </fieldset>
      .....

当您在fieldset中添加disabled attr时，fieldset内部输入字段数据将不会以表单形式发布，这意味着如果字段具有disabled属性，则该字段将不会在fieldset标记中工作。所以，您可以在每个条件中显示特定的表单，并在字段集标记中添加属性disable，内部字段数据将不会发布

---

了解

问题通过以下方式解决：

                 <input type="radio" name="tabs"  value="first" id="toggle-tab1"  {% if strategy == 'l' %} checked="checked"{% endif %} />
                 <label for="toggle-tab1">Long</label>

                 <input type="radio" name="tabs"   value="second" id="toggle-tab2" {% if strategy == 's' %} checked="checked" {% endif %}  />
                 <label for="toggle-tab2">Short</label>



                 <div id="tab1" class="tab"  >

        <form action="{% url "backtest" %}" method='POST' role='form' id='form'>
             {% csrf_token %}
             <input type="hidden" name="tabs"  value="first" id="toggle-tab1"  checked="checked" />

---

你试过JS吗？展示你的尝试。可能您需要var radio=document.getElementById'toggle-tab3'之类的东西；radio.onclick=函数{/*从DOM中删除元素*/}；或者使用jQuery$'toggle-tab3'。在'click'上，函数{/*从DOM*/}中删除元素；您可能需要学习基本的javascript教程，或者在Neeraj，您的代码以另一种形式对我很有用。。但现在我需要在单击单选按钮时完全删除旧表单。你们有什么想法吗？你们可以把表单html代码保存在js变量中，并在条件中加入一些逻辑。若选中了单选，则将变量html代码呈现到页面中；若未选中，则从页面中删除html代码。

    function onclick(e){
        var tab = document.getElementById('toggle-tab1');
        tab.style.visibility = "hidden";
    }

button1.addEventListener('click', onclick(e))

<form action="{% url "backtest" %}" method='POST' role='form' id='form'>
                  {% csrf_token %}

                <div id="tabs">


                 <input type="radio" name="tabs" value="first" id="toggle-tab1"  checked="checked" />
                 <label for="toggle-tab1">Long</label>

                 <input type="radio" name="tabs" value="second" id="toggle-tab2"     />
                 <label for="toggle-tab2">Short</label>

                 <input type="radio" name="tabs" value="third" id="toggle-tab3"   />
                 <label for="toggle-tab3">Long and Short</label>
                 <div id="tab1" class="tab"  >

                    <!-- first form will show when page load -->
                     <fieldset id="first" class="toggle">
                     {% include 'tags/parameters_form.html' %}
                     </fieldset>
                    <fieldset disabled id="second" class="toggle">
                          {% include 'tags/parameters_form.html' %}
                     </fieldset>
                     <fieldset disabled id="third" class="toggle">
                         {% include 'tags/parameters_form.html' %}
                     </fieldset>
      .....

$('[name="tabs"]').click(function(){
  $('.toggle').prop("disabled", true);
  var val = $(this).val()
  $('#'+val).prop('disabled', false);
});

                 <input type="radio" name="tabs"  value="first" id="toggle-tab1"  {% if strategy == 'l' %} checked="checked"{% endif %} />
                 <label for="toggle-tab1">Long</label>

                 <input type="radio" name="tabs"   value="second" id="toggle-tab2" {% if strategy == 's' %} checked="checked" {% endif %}  />
                 <label for="toggle-tab2">Short</label>



                 <div id="tab1" class="tab"  >

        <form action="{% url "backtest" %}" method='POST' role='form' id='form'>
             {% csrf_token %}
             <input type="hidden" name="tabs"  value="first" id="toggle-tab1"  checked="checked" />