Question

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

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

示例：

DIV A
元素A

我在使用JQuery的Javascript中的行为：
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

这很简单，而不是使用追加，使用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（） 然后另一个简单的问题解决方案是在 $（“＃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);            
});

希望有所帮助。

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

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

3 个答案: