How to delete div and all element inside div? Javascript, html, css

Question

I have a function that clears the entire div and it disappears but still appears in the inspect (html). This is a real problem because we have this input type field on the email and I got this empty data in email. I only want when this value is not chosen to completely remove me from html and inspect. Look at my code and try to catch the error. The most important things in the whole code that you need to pay attention are onchange="checkSelected()" in html and first script tag which manipulate with that. It should simply become a display none but it still stands there.

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

and my script tag

<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

Try variant with detaching/attaching DOM elements

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