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>

This is that code. I don't delete code I just display none that code. <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> I only want to hide from html and inspect when is not selected — Alex Al
– Alex Al, Commented Feb 18, 2019 at 15:00
Okey in Vue.js i Have direction v-show. If is v-show code is not display in html(inspect). It I want in jquery ... — Alex Al
– Alex Al, Commented Feb 18, 2019 at 15:02
So am I understanding this right, the element disappears from the rendered page as expected, because display was set to none successfully, but you expect it to disappear from the DOM inspector view as well? Then you would have to remove the element from the DOM, instead of just make it not display. (And if you are not even talking about the DOM inspector, but actually “source code view” in the browser - you can’t remove anything from there, that is just the initial HTML code the browser received. JS can not manipulate that at all.) — 04FS
– 04FS, Commented Feb 18, 2019 at 15:05
If you can reformat your question in a more readable way I may be able to assist you. I cannot understand what you have, what you want to do and whats wrong — Sabbin
– Sabbin, Commented Feb 18, 2019 at 15:05

Jigius · Accepted Answer · 2019-02-18 18:03:56Z

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>

answered Feb 18, 2019 at 18:03

Jigius

3154 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alex Al Over a year ago

But now my model and mark when is selected don't return value on email... ah :(

Jigius Over a year ago

Can you show actual text of html snippet - child elements of the <div id="additionalRow">...</div> ?

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related