Remove form from DOM using JavaScript

问题

I have three radio buttons.. each radio buttons on click have an independent form that appears. I need to remove form from DOM when i click on a radio button. and there are a third one not ready yet. When i click on the first radio button only its form appears, the other two are removed from DOM. Same for other. I don't have a good idea about 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 %}

回答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);
});

When you add disabled attr in fieldset then fieldset inner input field data will not post in form that means field will not work in fieldset tag if it have disabled attribute. So you can show specific form in each condition and add attribute disable in fieldset tag that inner field data will not post.

Read about https://www.w3schools.com/tags/att_fieldset_disabled.asp

回答2:

If you cannot change DOM elements and add a class there my answer would be to attach a event listener to each of the buttons:

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

On a side note a better approach would be to add a function to all of the radio inputs and then based on the ID or value of the input radio you can alter the behavior:

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

Then you can have a function:

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

回答3:

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

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

This should do the trick!

回答4:

Problem is resolved with :

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

来源：https://stackoverflow.com/questions/44506867/remove-form-from-dom-using-javascript