We Keep Coding

Removing an AppendTo element jQuery

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

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.

Show context-menus only when certain elements are clicked

I am kinda stuck with something and I need your help.
I am trying to show context-menus only when a user right-clicks on a certain elements in the page.
I thought I solve this problem by using getElementByClassName(...) and adding an onClick listener to each one of the elements, and when the user clicks on any of them I will then create the context-menus. And then remove the content menu later when everything is done.
Problem is that I don't have the full class names of those elements, all I know that they start with "story".
I am not sure how to go about doing this. Is there a way to use regex and getting all elements with a class name of story? Or is that not possible.
Thanks in advance,

There's this library that allows for regex selectors.
<div class="story-blabla"></div>
$("div:regex(class, story.*)")
However, you may not want to implement a full library. There's another solution:
$('div').filter(function() {
return this.class.match(/story.*/);
})
This will return the objects you want.

You can do this using attribute starts with selector
document.querySelectorAll("[class^=story]")

How to select elements within a variable using jQuery?

I'm trying to make a simple image browser for TinyMCE which I am using in my CMS. As part of this I need to detect whether the user has selected an existing image, so I can display the "edit" form instead of the "choose an image form".
var selected_html = ed.selection.getContent();
var $elem = $(selected_html);
console.log($elem);
The first function returns the user selected text from the editor window as a string of HTML. I then would like to use jQuery (although plain javascript is just ok too) to check if this string contains an img tag before subsequently grabbing the src and title attributes for editing.
Now I've got as far as getting the html to turn into an object. But after this I can't manage to search it for the img element. After reading this (How to manipulate HTML within a jQuery variable?) I tried:
$elem.find('img');
But it just comes out as an "undefined" object...
I think I'm missing something fairly obvious here (it is getting late), but after an hour I still can't figure out how to grab the img tag from the selection. :(
Many thanks in advance.

Because the <img> is at the root of the jQuery object, you need to use .filter() instead of .find().
$elem.filter('img');
The .filter() method looks at the element(s) at the top level of the jQuery object, while .find() looks for elements nested in any of the top level elements.
If you're not sure beforehand where the target element will be, you could place the HTML into a wrapper <div> to search from. That way the HTML given will never be at the top.
var selected_html = ed.selection.getContent();
var $elem = $('<div>').html(selected_html);
var $img = $elem.find('img');

Try to see what is really inside your $elem variable. Just do a console.log($elem) using both Firefox and Firebug and you should be able to manage quite alright! ;)