CODEWITHSUNDEEP
javascriptjqueryhtmlappendelement
Franco
Franco

Reputation: 2926

Add element to document and then remove it using Jquery

I am adding text to an element in Jquery using

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

I then show this to the user and pause.

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

I would now like to remove all the text I appended.

I have tried this but it didn't work

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

Upvotes: 2

Views: 1564

Answers (7)

Mohammad
Mohammad

Reputation: 21489

An easy way to do this work is adding class or id to appended element.

But if you don't want to do this, you can store new elements in variable and append it using .appendTo() to html document like this:

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

When you want to remove elements, use bottom code.

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>

Upvotes: 0

Amar Singh
Amar Singh

Reputation: 5622

Whatever you append append with a class like this and remove all at once using .remove()

Checkout the demo below

$('.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"/>

Upvotes: 0

Irvin Dominin
Irvin Dominin

Reputation: 30993

You can wrap your element in an tagged element with a class, or a custom tag, and then delete it accordingly like:

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);

Demo: https://jsfiddle.net/Lxy83r43/

Upvotes: 0

Manikant Gautam
Manikant Gautam

Reputation: 3591

You could try this also :

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

Upvotes: 0

Yogesh Sharma
Yogesh Sharma

Reputation: 2017

Check the below code it will work as expected - 

$('.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>

Upvotes: 0

Abhijeet
Abhijeet

Reputation: 4309

Change your code to :

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

And while removing you can use :

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

With the help of divId you can easily remove your appended element/string from '.alert-saved'.

Upvotes: 0

Emil S. J&#248;rgensen
Emil S. J&#248;rgensen

Reputation: 6366

Just pass an empty HTML string argument:

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

EDIT 1

If you need to keep other elements, you can use this method:

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>

Upvotes: 1

Related Questions