使用 JavaScript 从 DOM 中删除表单

Posted 2023-02-24

【中文标题】使用 JavaScript 从 DOM 中删除表单

【英文标题】：Remove form from DOM using JavaScript

【发布时间】：2017-11-14 08:50:30

【问题描述】：

我有三个单选按钮。点击时每个单选按钮都有一个独立的表单出现。当我单击单选按钮时，我需要从 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 %

【问题讨论】：

你有没有尝试过任何JS？展示你的尝试。可能你需要类似var radio = document.getElementById('toggle-tab3'); radio.onclick = function() /* remove elements from DOM */; 或使用jQuery $('#toggle-tab3').on('click', function() /*remove elements from DOM*/); 你可能需要学习基本的javascript 教程（可能是javascript.info，或w3schools.com/Js）

【参考方案1】：

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

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

这应该可以解决问题！

【参考方案2】：

问题已解决：

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

【参考方案3】：

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

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

了解https://www.w3schools.com/tags/att_fieldset_disabled.asp

【讨论】：

Neeraj 你的代码以另一种形式对我有用.. 但现在我需要在单击单选按钮时完全删除旧形式。你有什么想法吗？

您可以将表单html代码保存在js变量中，并添加一些带条件的逻辑。如果选中radio，则将可变html代码呈现到页面中，如果未选中，则从页面中删除html代码。

【参考方案4】：

如果您无法更改 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)
    
;