从 jQuery 中删除 HTML 元素

Question

I have the following basic HTML:

<select class="selector"><option value="first">FIRST</option><option value="second">SECOND</option></select>

<h1 id="firt">First</h1>
<h2 id="second">Second</h2>

When the value SECOND is selected, a jQuery function should remove <h2 id="second">Second</h2> , so I made the following function:

$(document).on('change', '.selector', function() {
    tst = $(this).val()
    if (tst == 'second'){
        $('#second').remove()
    }
});

It works without any problem, the trouble is that my current function will remove that element definitively, instead, if the value FIRST is selected after SECOND , my html should go back to the initial state. How can I handle it? Should I use another function instead of remove() here?

Answer 1

You can match the current value with id of the element to be shown:

 $(document).on('change', '.selector', function() { var tst = $(this).val(); $('#first, #second').hide(); $(`[id=${tst}]`).show() }); $('.selector').trigger('change'); // trigger the event on page load to show the element by matching the value

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select class="selector"><option value="first">FIRST</option><option value="second">SECOND</option></select> <h1 id="first">First</h1> <h2 id="second">Second</h2>

Answer 2

you should use hide when the selector is second and show other than selector second

 $(document).on('change', '.selector', function() { tst = $(this).val() if (tst == 'second'){ $('#second').hide(); } else{ $('#second').show(); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select class="selector"><option value="first">FIRST</option><option value="second">SECOND</option> <option value="third">Third</option> </select> <h1 id="firt">First</h1> <h2 id="second">Second</h2>

Answer 3

you can show and hide the element instead of removing it. add common class as heading to both header and show it by default.

see below code

NOTE: correct the spelling of header with id="first"

 $(function(){ $(document).on('change', '.selector', function() { $('.heading').show(); $('#' + $(this).val()).hide() }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select class="selector"><option value="first">FIRST</option><option value="second">SECOND</option></select> <h1 class="heading" id="first">First</h1> <h2 class="heading" id="second">Second</h2>

Answer 4

What you can do is play with the css display: none rule:

 $(document).on('change', '.selector', function() { tst = $(this).val() if (tst == 'second'){ $('#second').css({'display': 'none'}) } else { $('#second').css({'display': 'inline'}) } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select class="selector"><option value="first">FIRST</option><option value="second">SECOND</option> </select> <h1 id="firt">First</h1> <h2 id="second">Second</h2>

It will make the element disappear without removing it completely from the DOM.

Answer 5

As @Umair mentioned, use show / hide for this.

 $(document).on('change', '.selector', function() { tst = $(this).val() $("#second, #first").show(); if (tst == 'second'){ $('#second').hide() } else { $('#first').hide() } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select class="selector"><option value="first">FIRST</option><option value="second">SECOND</option></select> <h1 id="first">First</h1> <h2 id="second">Second</h2>

Answer 6

Jquery show hide will be the better way to do

 $(document).on('change', '.selector', function() { tst = $(this).val() if(tst == 'second') $('#second').hide(); else $('#second').show(); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <select class="selector"><option value="first">FIRST</option><option value="second">SECOND</option></select> <h1 id="firt">First</h1> <h2 id="second">Second</h2>

Answer 7

Using change method we can manage hide/show in jQuery.divText set instance for selector according div id will hide & show

$(".selector").change(function() {
  let divText = $(this).val();

  if (divText === 'second') {
    $('#second').hide();
  } else {
    $('#second').show();
  };
});