Удалить элемент HTML из jQuery

Question

У меня есть следующие основные c 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>

Когда выбрано значение SECOND, функция jQuery должна удалить <h2 id="second">Second</h2>, поэтому я сделал следующую функцию :

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

Работает без проблем, проблема в том, что моя текущая функция удалит этот элемент окончательно, вместо этого, если значение FIRST выбрано после SECOND, мой html должен go вернуться в исходное состояние. Как я могу справиться с этим? Должен ли я использовать другую функцию вместо remove() здесь?

Answer 1

Вы можете сопоставить текущее значение с id отображаемого элемента:

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

вы можете показать и скрыть элемент, вместо того, чтобы удалить его. Добавьте общий класс как heading к обоим заголовкам и покажите его по умолчанию.

см. код ниже

ПРИМЕЧАНИЕ: исправьте написание заголовка с 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 3

Вы должны использовать скрыть, когда селектор второй и показать, кроме селектора второй

$(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 4

Используя метод изменения, мы можем управлять скрытием / показом в jQuery .divText установить экземпляр для селектора в соответствии с div id будет скрывать и показывать

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

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

Answer 5

Jquery show hide будет лучшим способом сделать

$(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 6

Как уже упоминалось @Umair, используйте для этого show / hide.

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

Что вы можете сделать, это сыграть с правилом css display: none:

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

Это заставит элемент исчезнуть, не удаляя его полностью из DOM.