如何在使用JQuery切换DIV之后删除附加元素？

Question

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

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

例：

DIV A
元素A

我在Java中使用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);           
});

Answer 1

这很容易，而不是使用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);            
});

Answer 2

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

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

希望能有所帮助。

Answer 3

按照建议，现在，我正在这样做作为解决方案：

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