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

时间:2016-09-08 13:05:47

标签: javascript jquery html append element

我正在使用

向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>')

7 个答案:

答案 0 :(得分:1)

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

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

编辑1

如果您需要保留其他元素,可以使用此方法:

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

答案 1 :(得分:0)

将您的代码更改为:

$('.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'中删除附加的元素/字符串。

答案 2 :(得分:0)

检查以下代码,它将按预期工作 -

&#13;
&#13;
$('.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')
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="alert-saved"></div>
&#13;
&#13;
&#13;

答案 3 :(得分:0)

你也可以试试这个:

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

答案 4 :(得分:0)

您可以使用类或自定义标记将元素包装在带标记的元素中,然后将其删除,如:

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/

答案 5 :(得分:0)

无论你附加什么附加类似于此类并使用.remove()一次删除所有

查看下面的演示

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


$('.me').click(function(){
$('.added').remove();
})
&#13;
<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"/>
&#13;
&#13;
&#13;

答案 6 :(得分:0)

执行此工作的一种简单方法是向附加元素添加classid

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

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

如果要删除元素,请使用底部代码。

HTML.remove();

&#13;
&#13;
var HTML = $("<br><a>New link</a>");
$(HTML).appendTo('.alert-saved');
setTimeout(function(){
    HTML.remove();
}, 2000);
&#13;
<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>
&#13;
&#13;
&#13;