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