Removing an AppendTo element jQuery - javascript

I have a function that appends dynamic a and img tags to a specific div ID :
$('<a class="fap-single-track" href="http://web.com"><img src="http://web.com/image.jpg').appendTo("#status_01");
But I want the user to be able to update this link (elsewhere on the page).
How do I remove the appended data from #status_01 when I don't know exactly what the data is going to be (the url and image links are being gathered from a remote API).
The problem I'm having is that when the user selects a new URL to populate the appendTo data, the old one is also there, so I end up with multiple <a> & <img> sets.
I've tried a bunch of different ways but nothing seems to work.
If I :
$('#status_01').remove(); // before adding new data
The status_01 DIV is no longer available in the dom for the next function.
$('#status_01').detach();
Doesn't work either.
I've also tried and mixture of prepend and some other stuff but none of it seems to get rid of the appendTo data.
Is it possible?
Or maybe there is something other than appendTo that I can use instead to attach the data in the first place?

This maybe ?
$('#status_01').html("");
Or, if you want to only remove the last :
$('#status_01').children().last().remove();

In addition to #Remy's correct answer, you can also use .empty():
$('#status_01').empty();

Related

get .html() of {{#each}}

I have a $('.textarea').val() that gets the value of said textarea upon submission, inserts it into a Mongo.Collection and then displays it through {{#each}}{{/each}} in the body.
Before the text is inserted into the collection and then returned & published again, I have a regex set up to replace all image links with <img src='said link'>
My issue is that .val() does not work with tags, only .html and .text does, which I cannot use to get the value of a textarea. Is there any clever way of going about this (replacing .val() with .html()? Perhaps a listener on the body to replace all links with the tag after the text has already been submitted, in which case, how would I go about setting it up to listen for all text change?
EDIT:
To be more precise, is there a way to perform
$('.messages').html($('.messages).html().replace(this, 'that'))
on values that are constantly changing and output by {{#each}}
after returned from a collection? Is there a way to refer to each of the messages rather than whole?
If I understand correctly you are trying to replace all the sources in a text with images. This should help you:
http://forum.jquery.com/topic/replacing-text-links-with-images
Also, read this part of the jquery documentation:
http://api.jquery.com/attr/
I think that you are on the right track: changing the .html() should work.

Duplicating IDs Jquery

So, I have done some research, and it's pretty clear that id should be unique in the DOM. This is my issue, and I am curious what the best solution to it is:
I am using jQueryUI tabs as well as a custom menu and ajax to load specific pages into a content pane without re-rendering the browser. From some of these sub pages, a user can open a popup (done with a jQueryUI dialog) to edit customer information. Because these load a server side page, in each place that this form would be generated, it uses the same ids.
I have found that there are a number of ways to close a dialog without removing it from the DOM. This causes confusion later when it, or another form is opened elsewhere, and now there are conflicting ids present in the DOM. I am working on tracking down all the ways to close a dialog, and making sure to replace them with .dailog("destroy").remove() to make sure that they are erased from the DOM, but I want to be sure the solution here is fool proof in the event that someone one gets left on the page.
My two immediate thoughts:
1.) Generate a random string to append to each form element's id when the form is rendered, fully preserving uniqueness of the id.
2.) Use more specified selectors when getting the form data, i.e. scoping it to the popup that was created, the page that it was created from, and then the tab that it is under, and not worrying as much about id uniqueness.
The first feels ugly, and in theory you COULD randomly duplicate the string and still run into an issue. The later just feels bulky and ugly to me. Is there an option I am missing? What is best practice when it comes to dealing with IDs that can be duplicated in this way?
Thanks,
Eric
You may use classes if you need "similar" objects. Id's purpose is to identify object uniquely.
By the way, classes are widely used, for example, in Bootstrap.
UPDATE: I think your "second" approach is bad, as you eventually can change the layout, but, in this way, you should track every change, and remember WHERE to change your selectors (possibly, it will be multiple places).
Before inserting the new element into the list, you could check if there is already an element existing on the page with that id. If it does exist than delete it.
Like:
if($("#"+your_id).length!==0)
$("#"+your_id).remove();
//insert the new element
But if you need that element as well, i would suggest that you use classes to group elements used for same purposes.
Here is what you can do to distinguish between the different dialogs when you try to close them:
1) Change each dialog id into a class, so that your dialogs can share the same class. Using the same id is not recommended.
2) You can create a click listener for the button that closes the correct dialog by using the event callback parameter. See the working snippet below.
var closeButtons, i, closeButtonsLen;
closeButtons = document.getElementsByClassName('close');
for (i = 0, closeButtonsLen = closeButtons.length; i < closeButtonsLen; i += 1) {
closeButtons[i].addEventListener('click', function (e) {
e.target.parentNode.setAttribute('hidden', true); // if you want to hide the dialog
});
}
<div class="dialog"><button class="close">first x</button></div>
<div class="dialog"><button class="close">second x</button></div>
<div class="dialog"><button class="close">third x</button></div>
You can replace e.target.parentNode.setAttribute('hidden', true); with whatever you need to do. e.target.parentNode gets the dialog element.

jQCloud - how to clear it?

I'm using a script for showing a tag-cloud from here.
var word_list = getTags();
$("#example").jQCloud(word_list);
<div id='example'></div>
I'm loading the tags dynamically from different sources by clicking on a button. The first time it shows the the tags properly, but the next time it "adds them up" to the tags that are already there. I need to clear or refresh the tag-cloud somehow, I tried this:
$('#example').val('');
and there was no luck.
Is there a way to do it at all?
You may try using this:
$('#example').html("");
The .val method is primarily used to get or set the values of form elements such as input, select and textarea. It won't set the value of the div as you are trying to.
You can use jQuery empty() to remove all child nodes from your div and then call $("#example").jQCloud(word_list); again so that you can fill it up with new ones
Try:
$('#example').empty();

How can I add a unique ID to each link of a certain class with jquery?

I'm writing something where I find a list of links and generate a save button. I want to prevent the save button from showing on links that are already saved, though, so I plan on giving each of the links a unique ID based on a unique number in the URL of the main links and just disabling it if it's already been saved. I'm not quite sure how I can accomplish this, though.
This is currently what I have:
$(".fl a").after(' Save');
$(".appended").attr('id', $(this).prev().attr("href").split("=")[1]);
There will always be a link that matches that split pattern immediately before a link of the appended class. What is the correct way to achieve this? Apparently I can't use $(this) in this context but I don't know what to do instead.
Use .each():
$(".appended").each(function() {
this.id = $(this).prev().attr("href").split("=")[1];
});
This will iterate over elements with class appended and change the ID accordingly.

In Greasemonkey/javascript, how can I handle new elements added to page?

I have written a Greasemonkey script which manipulates the contents of certain elements with the following selector:
$("span.relativetime").each(function() { $(this).html("TEST"); });
However, sometimes matching elements are added to the page through AJAX, and I don't know how to handle those new elements. I have tried this, but it doesn't work:
$("span.relativetime").live(function() { $(this).html("TEST"); });
The documentation for jQuery live() says that it wants an event (like "click"). But I don't have any event, I just want to know when something matching my selector has been created, and then I want to modify it.
Background: I am encountering this problem with a Greasemonkey script to display StackOverflow's relative timestamps as absolute local timestamps, which you can find on meta-SO. The problem is when you click "show all comments", the new comments are added by AJAX, and I don't know how to find and replace the timestamps in those scripts.
With StackOverflow's setup I find it annoying to handle stuff after the comments. What I've done is put a bind on the Add/Remove comments button that uses setTimeout to wait for the elements to be created, and then modify them.
One thing you could try (although I'm not sure if it would work) is to cache your selection in some global variable like so:
var $relativetime = $("span.relativetime");
Then you would have your .each function:
$relativetime.each(function() { $(this).html("TEST"); });
After your new elements were added to the DOM, you could reselect append to your cached object:
$relativetime.append("<my html>"); //or
$("<my html>").appendto($relativetime);
(P.s. .html() is for setting html. To set text, use .text()

Categories