如何制作一个切换按钮以添加 "remove" from DOM a div？

Question

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

我想将添加的 div 导出到 MSword。我正在使用 "filesaver.js" 和 "jquery.wordexport.js"。它也很好用。使用另一个按钮，它让我添加了 div 到可下载的单词 (.docx)

现在，如果我单击按钮添加 div 并下载 .docx，添加的 div 会出现在 .docx 中。如果我不点击它，.docx 是空白的（到目前为止还不错）

我的问题是：如果我点击"add div"按钮然后再次点击它（使div消失），它不会在我下载时从 .docx 中删除。

不知是不是因为我的javascript没有专门的“.remove”功能。我是新手，抱歉。

这是 add/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

每次都尝试 adding/removing 容器中的元素本身，而不是简单地 hiding/showing 它，这会将元素留在 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>

如何制作一个切换按钮以添加 "remove" from DOM a div？

How to make a toggle button to add and "remove" from DOM a div?

html

javascript

jquery

ms-word

toggle