使用JavaScript从DOM中删除表单

Question

我有三个单选按钮。点击时的每个单选按钮都有一个独立的窗体出现。当我点击一个单选按钮时，我需要从DOM中删除表单。 还有第三个还没有准备好。当我点击第一个单选按钮时，只有它的形式出现，另外两个从DOM中删除。其他相同。 我对JavaScript没有一个好主意。

HTML：

<div class="page-header"> 
    <h1>Backtesting{% if form.instance.pk %}: {{form.instance.title}} {% endif %}</h1> 
    </div> 

    <div class="row"> 
    <div class='col-md-9'> 
       <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" > 



        {% include 'tags/parameters_form.html' %} 
         <br /> 


          {% if user.is_authenticated %} 
          <input type='submit' id='run' value='Run' class='btn btn-default'> 

          {% if user.profile.is_active %} 
        Name: {{ form.title }} <input type='submit' name='save' value='Save' class='btn btn-default'> 
       {% else %} 
        <p> 
        Expired account! you need to reactivate in order to save parameters. 
        </p> 
       {% endif %} 
      {% else %} 
            Please <a href="{% url 'auth_login' %}">login</a> in order to Run backtesting! 
       </br> 
       Our system needs your email in order to notify you once one or more of your simulations are done. This is a safer way for you to keep track of your previous simulations (/jobs). 

           {% endif %}       




       </div> 
       <div id="tab2" class="tab" > 

        {% include 'tags/parameters_backtest_form.html' %} 
          <br /> 


          {% if user.is_authenticated %} 
          <input type='submit' id='run' value='Run' class='btn btn-default'> 

       {% if user.profile.is_active %} 
        Name: {{ form.title }} <input type='submit' name='save' value='Save' class='btn btn-default'> 
       {% else %} 
        <p> 
        Expired account! you need to reactivate in order to save parameters. 
        </p> 
       {% endif %} 
      {% else %} 
            Please <a href="{% url 'auth_login' %}">login</a> in order to Run backtesting! 
       </br> 
       Our system needs your email in order to notify you once one or more of your simulations are done. This is a safer way for you to keep track of your previous simulations (/jobs). 

           {% endif %} 






       </div> 
        </div> 
      </form> 

     </div> 

    </div> 
{% endblock %} 

Answer 1

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

的js

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

当您在字段集则字段集内输入字段的数据将不会在形式发布，这意味着字段不会在字段集标签的工作，如果它已禁用属性添加禁用ATTR。因此，您可以在每个条件中显示特定的表单，并在fieldset标记中添加禁用内部字段数据不会发布的属性。

阅读https://www.w3schools.com/tags/att_fieldset_disabled.asp

Answer 2

如果你不能改变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" /> 

然后你就可以有一个函数：

function handleClick (e) { 
    if (e.id == 'toggle-tab1') { 
     // Code that takes it away (hide DOM elements or whatever you need) 
    } 
}; 

Answer 3

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

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

这应该做的伎俩！

Answer 4

问题与解决：

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