如何使用 JQuery 切换 DIV 后删除追加的元素

How removing an appended element after a DIV is toggled using JQuery?

本文关键字：删除 追加 元素 DIV 何使用 JQuery 切换      更新时间：2023-09-26

我必须在具有切换功能的DIV上附加一个元素。但是当我再次单击切换时（当它被切换时），我之前附加的元素会再次附加。我最终得到了两个相等的元素。

观察：考虑到我需要附加多个元素。并删除附加的多个元素。

例：


甲级      元素 A

我在 Javascript 中使用 JQuery 的操作：
1） 切换 DIV A 并附加元素 A =div A 和元素 A 出现。
2） 切换 DIV A =div A 和元素 A 消失。
3） 切换 DIV A 并再次附加元素 A =

DIV A
   Element A
   Element A

我只想要一个元素 A.（这就是问题所在，切换不会删除我之前附加的元素）

我的代码是这样的：

$("#DIVA").toggle(function(){
    var my_div_to_be_appended = "<div>my div<div>";
    var my_div_to_be_appended2 = "<div>my div2<div>";
    $("DIVA").append(my_div_to_be_appended);
    $("DIVA").append(my_div_to_be_appended2);           
});

这很简单，而不是使用append，使用html。

$("#DIVA").toggle(function(){
    var my_div_to_be_appended = "<div>my div<div>";
    // This will replace the content every time the toogle function is called.
    $("DIVA").html(my_div_to_be_appended);            
});

如果您的 DIVA 为空，那么 sch4v4 的解决方案非常适合您，但如果该div 中已经包含一些内容并且您不能使用 .html（）那么解决你的问题的另一个简单方法是在你的$（"#DIVA"）中保留另一个空的div，而不是附加它本身。以以下示例为例

<div id="DIVA">
  <!-- Some other elements here - if any -->
  <div id="my_dynamic_div"></div>
</div>

然后在你的jquery代码中

$("#DIVA").toggle(function(){
    var my_div_to_be_appended = "<div>my div<div>";
    $("#my_dynamic_div").html(my_div_to_be_appended);            
});

希望有帮助。

按照建议，现在，我这样做是一种解决方案：

$("#DIVA").toggle(function(){
    var my_div_to_be_appended = "<div>my div<div>";
    var my_div_to_be_appended2 = "<div>my div2<div>";
    $("DIVA").html(my_div_to_be_appended + my_div_to_be_appended2);           
});
相关文章：