Remove an HTML element from jQuery

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?

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

Mamun · Accepted Answer · 2020-02-04 11:32:42Z

4

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>

answered Feb 4, 2020 at 11:32

Mamun

69k9 gold badges51 silver badges62 bronze badges

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

2 Comments

Jeremy Thille Over a year ago

At last a simple parametric solution. All 8 other answers (!) rely on copy/pasting inefficient code N times.

Jack022 Over a year ago

Seems to be the shortest and most efficient way to go, thank you!

Mohammad Ali Rony · Accepted Answer · 2020-02-04 11:27:15Z

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>

edited Feb 4, 2020 at 11:27

answered Feb 4, 2020 at 11:24

Mohammad Ali Rony

4,9413 gold badges23 silver badges36 bronze badges

Comments

Bhushan Kawadkar · Accepted Answer · 2020-02-04 11:27:28Z

2

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>

answered Feb 4, 2020 at 11:27

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

Comments

johannchopin · Accepted Answer · 2020-02-04 11:23:34Z

1

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.

answered Feb 4, 2020 at 11:23

johannchopin

15k11 gold badges64 silver badges125 bronze badges

Comments

Akash Shrivastava · Accepted Answer · 2020-02-04 11:25:31Z

1

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>

answered Feb 4, 2020 at 11:25

Akash Shrivastava

1,3659 silver badges16 bronze badges

Comments

ayyappa · Accepted Answer · 2020-02-04 11:37:34Z

1

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>

answered Feb 4, 2020 at 11:37

ayyappa

571 silver badge7 bronze badges

Comments

Manishkumar Bhavnani · Accepted Answer · 2020-02-05 03:17:17Z

1

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

edited Feb 5, 2020 at 3:17

answered Feb 4, 2020 at 12:04

Manishkumar Bhavnani

577 bronze badges

2 Comments

Manishkumar Bhavnani Over a year ago

divText set instance for selector according div id will hide & show. please let me if you need additional detail.always helpful to community

leopal Over a year ago

Please update your answer by pressing edit button under your answer. Comment's section is not the right place for this.

Collectives™ on Stack Overflow

Remove an HTML element from jQuery

7 Answers 7

2 Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related