javascript删除并重新添加

时间:2020-01-05 23:27:02

标签: javascript jquery

我坚持使用元素.remove。 如果需要单击新数据,我需要一种方法来删除id="tut"并能够重新使用id="tut"

有什么建议吗?感谢您的帮助。

<span id="tut" style="font-weight:bold"></span>

<button id="delete">Remove</button>

$('#delete').on('click', function(){
    $('#tut').remove();  
});

2 个答案:

答案 0 :(得分:3)

为什么不使用.empty()?

<button id="delete">Remove</button>
$('#delete').on('click', function(){
    $('#tut').empty();  
});

如果您需要删除整个<span>,那么最好生成它! 以后,当跨度变为非Dom元素时,最好选择一个包装容器。

更新:要丰富答案,并为那些希望从该标题中获得答案的人提供一种在删除元素后复活元素的方法。

还有另一个名为detach()的jQuery函数,能够分离(临时删除)具有其内容的元素,但是可以在需要时重新添加!

<span id="tut" style="font-weight:bold">Immortal</span>

<button id="kill">Kill</button>
<button id="resurrect">Resurrect</button>

$('#kill').on('click', function(){
    zombie = $("#tut").detach();
});

$('#resurrect').on('click', function(){
    $("body").append(zombie);
});

此处演示:https://jsfiddle.net/gejsk7w2/

答案 1 :(得分:1)

添加jQuery库(<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>)后,您的代码对我有用。

这里有一个有效的示例:https://codepen.io/edlucas/pen/JjoMRpG

不要光顾,但是很难从您的示例中看出:如果不将JavaScript分离到一个新文件中,则必须用<script></script>标签将其包围。