如何删除div中的div和所有元素？ Javascript，html，css

Posted 2023-02-03

我有一个函数，清除整个div，它消失但仍然出现在inspect（html）中。这是一个真正的问题，因为我们在电子邮件中有这个输入类型字段，我在电子邮件中获得了这个空数据。我只想在没有选择此值时将我从html中删除并检查。查看我的代码并尝试捕获错误。你需要注意的整个代码中最重要的事情是html中的onchange="checkSelected()"和用它操纵的第一个脚本标记。它应该只是一个显示器，但它仍然站在那里。

<div class="modal fade" id="montageModal" tabindex="-1" role="dialog">
   <div class="modal-dialog" role="document">
      <div class="modal-content" style="display: flex;">



         <div class="modal-body">


            <form id="schedule_form" class="clearfix" action="index.php?route=api/reifenmontage" method="post">

               <div class="container-fluid">

                  <div class="step_1"  >
                     <h3 class="modal-title">Reifenmontage Termin buchen  </h3>
                     <div class="row termin_row">
                        <div class="col-xs-12 col-sm-4">
                           <div class="row">
                              <label>Pneu-Typ</label>
                           </div>
                        </div>
                        <div class="col-xs-12 col-sm-6">
                           <div class="row">
                              <select onchange="checkSelected()" class="form-control" name="pneu" id="pneu">
                                 <option value="Motorrad">Motorrad</option>
                                 <option value="Auto">Auto</option>
                              </select>
                           </div>
                        </div>
                     </div>
                     <div id="additionalRow"  class="row termin_row" >
                     <div id="reifenmontage-input" class="row termin_row">
                        <div class="col-xs-12 col-sm-4">
                           <div class="row">
                              <label>Mark und model</label>
                           </div>
                        </div>
                        <div class="col-xs-12 col-sm-4">
                           <div class="row">
                              <select name="marka" class="form-control" id="button-getdata">
                              </select>
                           </div>
                        </div>
                        <div class="col-xs-12 col-sm-4">
                           <div class="row">
                              <select name="model" class="form-control" id="result" > 
                              </select> 
                           </div>
                        </div>

                     </div>
                     </div>
                     <div class="row termin_row">
                        <div class="col-sm-4 col-xs-12">
                           <div class="row"><label>2. Terminvorschlag</label></div>
                        </div>
                        <div class="col-sm-4 col-xs-6">
                           <div class="row">
                              <div class="input-group date" id="date-2" data-termin="1">
                                 <input type='text' class="form-control" name="date[1]" />
                                 <span class="input-group-addon">um</span>
                              </div>
                           </div>
                        </div>
                        <div class="col-sm-4 col-xs-6">
                           <div class="row">
                              <div class="input-group time" id="time-2" data-termin="1">
                                 <input type='text' class="form-control" name="time[1]" />
                                 <span class="input-group-addon">Uhr</span>
                              </div>
                           </div>
                        </div>
                     </div>

                     <div class="row">
                        <div class="checkbox">
                           <label>
                              <input type="checkbox" name="accept" id="accept"> Ich akzeptiere die <a href="teilnahmebedingungen" target="_blank">Teilnahmebedingungen</a>
                           </label>
                        </div>
                     </div>

                     <div class="row text-center">
                        <button type="button" class="btn btn-primary btn-lg btn-submit" id="next_step" disabled="disabled">Anfrage senden</button>
                     </div>
                  </div>

                  <div class="step_2">
                     <h3 class="modal-title">Your contact info</h3>

                     <div class="">
                        <div class="form-group clearfix">
                           <input type="text" name="name" value="<?= $user['name'] ?>" placeholder="Name and Lastname" class="form-control name text" required />
                        </div>
                        <div class="form-group clearfix">
                           <input type="text" name="phone" value="<?= $user['phone'] ?>" placeholder="Phone" class="form-control phone text" required />
                        </div>
                        <div class="form-group clearfix">
                           <input type="email" name="email" value="<?= $user['email'] ?>" placeholder="Email" class="form-control email text" required />
                        </div>
                        <div class="text-center">
                           <button type="submit" id="submit" class="btn btn-default btn-lg btn-submit" >Suchen</button>
                        </div>
                     </div>

                  </div>

               </div>

            </form>

         </div>
         <div class="modal-footer">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">SCHLIESSEN</button>
         </div>
      </div>
   </div>
</div> 

和我的脚本标签

<script type="text/javascript">
   let selectItem = document.getElementById('pneu');
   let additionalRow = document.getElementById('additionalRow');
   function checkSelected() 
      if (selectItem.selectedIndex == "1") 
         additionalRow.style.display = 'none';
       else 
         additionalRow.style.display = 'block';
      
   
</script> 

<script type="text/javascript">
$('#button-getdata').on('change', function() 
    $.ajax(
        url: 'index.php?route=api/reifenmontage/get_marka_data',
        type: 'post',
        data: $('#reifenmontage-input select'),
        dataType: 'json',
        beforeSend: function() 

        ,
        success: function(json) 

            if (json['success']) 
               $("#result").empty();
                for (i in json['success']) 
                var element = json['success'][i];
                var o = new Option(element['model'], element['model']);
               $("#result").append(o);
                    html = "\t<option   value=\""+ element['model'] + "\">" + element['model'] + "</option>\n";
                    $("#result").append(o); 
                
               //  document.getElementById("schedule_form").reset();
               

        
    );
);
</script>  

<script type="text/javascript">

$.ajax(
 url: 'index.php?route=api/reifenmontage/mark',
 context: document.body,
 success: function(data) 
   const selectControl = $('#button-getdata');
   selectControl.html(data.map(ExtractData).join(''));
 
);

function ExtractData(item) 
return ` <option value="$item.value">$item.label</option>`;


</script>

答案

尝试使用分离/附加DOM元素的变体

<script type="text/javascript">
   let selectItem = document.getElementById('pneu');
   //let additionalRow = document.getElementById('additionalRow');
   let detached = '';
   function checkSelected() 
      if (selectItem.selectedIndex == "1") 
         detached = $('#reifenmontage-input').detach();
       else 
         detached.appendTo('#additionalRow');
      
   
</script>