javascript - 从 jQuery 中删除 HTML 元素

Question

我有以下基本 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 应该回到初始状态。我该如何处理？我应该使用另一个函数而不是 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>