代码之家 › 专栏 › 技术社区 › Rohalt

如何创建一个切换按钮来添加和“删除”DOM a div?

toggle ms-word html jquery javascript

Rohalt · 技术社区 · 7 年前

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

我想将div添加的内容导出到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>

1 回复 | 直到 7 年前

CertainPerformance 7 年前

每次尝试从容器中添加/删除元素本身,而不是简单地隐藏/显示它,这会将元素留在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>

推荐文章

Tim Dol · Word VSO获取Office URI方案设置的默认存储位置

3 年前

Jonathan L · Mailmerge-单个PDF-前2行不是标题

3 年前

Saxman · 在允许VBA的同时限制Word文档

7 年前

Shabaz · 在Word文档中的(单引号/双引号)之间搜索文本

7 年前

dieKoderin · 使用vba编辑Microsoft Word标题中的定位点位置

7 年前

SlowLearner · MS Word是否具有与ExecuteExcel4Macro等效的

7 年前

Ratilius · Excel Vba to Word:如何将页码写入文本框?

7 年前

plaene · 在VBA中搜索特定的Word文档选择

7 年前

Walid Abdelal · 预格式化字符串的在线插入

7 年前

simplify · 从WORD表格VBA获取公式值

7 年前