将元素添加到文档,然后使用 Jquery 将其删除
Add element to document and then remove it using Jquery
我正在使用
向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>')
只需传递一个空的 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>
将代码更改为:
$('.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'
中删除附加的 element/string。
检查下面的代码,它将按预期工作 -
$('.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>
你也可以试试这个:
$('.alert-saved').next().remove();
您可以将您的元素包裹在带有 class 或自定义标签的标签元素中,然后相应地删除它,例如:
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);
无论你附加什么,都像这样附加一个 class 并使用 .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"/>
完成这项工作的一种简单方法是将 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>
我正在使用
向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>')
只需传递一个空的 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>
将代码更改为:
$('.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'
中删除附加的 element/string。
检查下面的代码,它将按预期工作 -
$('.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>
你也可以试试这个:
$('.alert-saved').next().remove();
您可以将您的元素包裹在带有 class 或自定义标签的标签元素中,然后相应地删除它,例如:
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);
无论你附加什么,都像这样附加一个 class 并使用 .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"/>
完成这项工作的一种简单方法是将 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>