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?

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?

• javascript
• jquery

• 2 Why not show / hide the elements as per need instead of removing. – Umair Khan Commented Feb 4, 2020 at 11:23

7 Answers 7

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

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

you can show and hide the element instead of removing it. add mon 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./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>

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./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 pletely from the DOM.

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

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

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();
  };
});