Question

我做了一个切换按钮来添加和删除div。它运作良好（参见代码片段）

我想将MS添加到MSword中。我正在使用“filesaver.js”和“jquery.wordexport.js”。它也运作良好。使用另一个按钮，它为我提供了一个可下载单词（.docx）

的div

现在，如果我单击按钮添加div并下载.docx，添加的div会出现在.docx上。如果我没有点击它，.docx是空白的（到目前为止很好）

我的问题是：如果我点击“添加div”按钮，然后再次点击它（使div消失），当我下载时，它不会从.docx中删除它

我想知道是不是因为我的javascript上没有具体的“.remove”功能。对不起，我是新来的。

这是添加/删除div按钮

$(function(){
    var NewContent='<div class="added">HELLO</div>'
    $(".addremove").one('click', function(){
    var $content =  $(NewContent).appendTo('.toadd');
    $(this).click(function(){
    $content.toggle();
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toadd">
  <button type="button" class="addremove">Add / Remove</button>
</div>

Answer 1

每次尝试从容器中添加/删除元素本身，而不是简单地隐藏/显示它，这会将元素留在DOM中：

$(function(){
    let NewContent='<div class="added">HELLO</div>'
    let added = false;
    let $content;
    $(".addremove").on('click', function(){
      if (!added) $content =  $(NewContent).appendTo('.toadd');
      else $content.remove();
      added = !added;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toadd">
  <button type="button" class="addremove">Add / Remove</button>
</div>

如何制作一个切换按钮来添加和从DOM中“删除”一个div？

1 个答案: