javascript - 如何制作一个切换按钮以从 DOM 中添加和 "remove"div？

Question

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

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

现在，如果我单击按钮添加 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>