将元素添加到文档，然后使用 Jquery 将其删除答案

【问题标题】：Add element to document and then remove it using Jquery将元素添加到文档，然后使用 Jquery 将其删除
【发布时间】：2017-01-16 10:28:16
【问题描述】：

我正在使用 Jquery 向元素中添加文本

$('.alert-saved').append('<br /><a href="/?similar=' + release_id  + '&source=index">See more like this >></a>')

然后我将其展示给用户并暂停。

$('.alert-saved').delay(5000).fadeOut(2000);

我现在想删除我附加的所有文本。

我试过了，但是没用

$('.alert-saved').remove('<br /><a href="/?similar=' + release_id  + '&source=index">See more like this >></a>')

【问题讨论】：

您可以将其添加到具有特定类别的标签中，当您想要删除它时可以轻松选择它。
@Franco 检查下面给出的代码，我希望它能按照您的要求工作
在下面查看我的演示

标签： javascript jquery html append element

【解决方案1】：

只需传递一个空的HTML 字符串参数：

$('.alert-saved').html('');

编辑 1

如果需要保留其他元素，可以使用这种方法：

var newLine = jQuery('<br /><a href="#your whatever">See more like this</a>');
jQuery(".alert-saved").append(newLine);
setTimeout(function() {
  jQuery(newLine).remove();
}, 2000)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="alert-saved">
  <span>I wanna stay!</span>
</p>

【讨论】：

实际上我希望在元素中保留其他文本
考虑我的建议

【解决方案2】：

将您的代码更改为：

$('.alert-saved').append('<div id="divId"><br /><a href="/?similar=' + release_id  + '&source=index">See more like this >></a></div>');

在删除时你可以使用：

$('.alert-saved').remove('#divId');

在divId 的帮助下，您可以轻松地从'.alert-saved' 中删除附加的元素/字符串。

【讨论】：

【解决方案3】：

检查下面的代码，它会按预期工作 -

$('.alert-saved').append('<div class="testing" <br /><a href="/?similar=' + 'release_id'  + '&source=index">See more like this >></a> </div>')

$('.alert-saved').delay(5000).fadeOut(2000);

$('.alert-saved').remove('.testing')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="alert-saved"></div>

【讨论】：

【解决方案4】：

你也可以试试这个：

$('.alert-saved').next().remove();

【讨论】：

【解决方案5】：

您可以将元素包装在带有类或自定义标签的标记元素中，然后相应地删除它，如下所示：

var release_id = 'demo'
$('.alert-saved').append('<div class="added"><br /><a href="/?similar=' + release_id + '&source=index">See more like this >></a></div>')

setTimeout(function() {
  $('.alert-saved>.added').remove();
}, 5000);

演示：https://jsfiddle.net/Lxy83r43/

【讨论】：

【解决方案6】：

无论你追加什么，都使用这样的类并使用.remove()一次性删除所有内容

查看下面的演示

$('.yes').click(function(){
$('.alert-saved').append('<div class ="added" ><br /><a href="/?&source=index">See more like this >></a>');
})


$('.me').click(function(){
$('.added').remove();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="alert-saved">

asdasdasdas

</div>

<input type="button" class="me" value="remove"/>
<input type="button" class="yes" value="add"/>

【讨论】：

【解决方案7】：

完成这项工作的一种简单方法是将class 或id 添加到附加元素。

但如果您不想这样做，您可以将新元素存储在变量中，然后使用 .appendTo() 将其附加到 html 文档中，如下所示：

var HTML = $("<br><a>New link</a>");
$(HTML).appendTo('.alert-saved');

当你想删除元素时，使用底部代码。

HTML.remove();

var HTML = $("<br><a>New link</a>");
$(HTML).appendTo('.alert-saved');
setTimeout(function(){
    HTML.remove();
}, 2000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alert-saved">
    <a>Old link</a>
</div>

【讨论】：