如何删除div和div中的所有元素？ Javascript，HTML，CSS

Question

我有一个清除整个div的函数，它消失了，但仍然出现在检查（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>

Answer 1

尝试使用带有分离/附加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>