Help with jQuery element selection

Question

I have a list of links as follows:

<li>
 <a onclick="add_to_shortlist('225')" href="javascript:void(0);" id="link_225">
 <img src="images/icon-add.png">Add</a>
</li>
<li>
 <a onclick="add_to_shortlist('226')" href="javascript:void(0);" id="link_226">
 <img src="images/icon-add.png">Add</a>
</li>

I'd like to change the text "Add" to "Remove" - and the image src from "images/icon-add.png" to "images/icon-remove.png"

How can I do this?

I know I can select the link clicked using:

 $('#link_' + song_id)

and use this to change the image

 $(".img").attr("src").replace("images/icon-add.png", "images/icon-remove.png");

But am unsure how to proceed.

Answer 1

If you don't have any event handlers on the image itself, you can do this:

$('#link_' + song_id).html(
 '<img src="images/icon-remove.png">Remove</a>'
);

Live example

That replaces the content of the link with the updated img tag and text. The reason I mentioned not having event handlers on the image is that since this replaces the img element, any handlers on the old element are not assigned to the new element.

If you need to preserve the old image and just change its src, you can use detach:

var link = $('#link_' + song_id),
 img = link.find('img');
img.detach();
img.attr("src", "images/icon-remove.png");
link.html("Remove");
link.prepend(img);

Live example

detach takes an element out of the DOM but without removing any event handlers. Then we change the src, update the text in the link, and re-insert the same img element rather than replacing it.

---

Rather than using onclick= to assign an event handler and changing the handler when you change what it means, I'd use modern ways of assigning the handler and then have the handler figure out what needs to be done. Something like this:

HTML:

<a id="link_255"><img src="images/icon-add.png">Add</a>

JavaScript:

jQuery(function($) {
 $('a[id^=link]').click(function(event) {
 var link = $(this),
 song_id = this.id.substring(5); // Drop the "link_" part
 if (link.text() == "Add") {
 add_to_shortlist(song_id, link);
 }
 else {
 remove_from_shortlist(song_id, link);
 }
 return false; // Prevent the link from being followed
 });
});
function add_to_shortlist(song_id, link) {
 if (!link) {
 link = $('#link_' + song_id);
 }
 // ...add the song...
 // Update link
 link.html('<img src="images/icon-remove.png">Remove');
}
function remove_from_shortlist(song_id, link) {
 if (!link) {
 link = $('#link_' + song_id);
 }
 // ...remove the song...
 // Update link
 link.html('<img src="images/icon-add.png">Add');
}

Live example

Note that I've added a second argument to add_to_shortlist and remove_from_shortlist, but I've made it optional. That's because we can avoid looking up the link if we already have it, but if you're calling this from another part of your code that won't provide the second argument, we'd want to look it up. The above replaces the img element, but it's easy enough to swap in the code from example #2 in the main answer to preserve the img element if you need to.

• Simon: Great this works but I also need to change the onclick="add_to_shortlist('226')" to become onclick="remove_from_shortlist('226')"
• T.J. Crowder: @Simon: I'd recommend handling that (and in fact the whole way you're hooking it up), let me post an addendum.