How can I remove a link from an image in the editor?

[#1]

 I know how to make something a hyperlink or change a hyperlink, but I have an image that is linked on my site and as part of a variation I want to remove that link. Thanks!

[#2]

Right click on the image, hover over edit element then click on edit hyperlink. Delete the existing link. If you'd like to commit the same change in the variation code section of your experiment simply copy and paste the following line of code:

$("YOURIMAGESELECTOR").attr({"href":""});

[#3]

Thanks for the quick reply! However, I already tried this and when I preview it the image is still linked it just reloads the page. If it makes any difference the link change is just going from "href":"/" to "href":""

[#4]

Anytime, have you tried manually putting in the code like I had mentioned in the variation code section? If you're still getting an error, you might be targeting a different element or not targeting the appropriate selector.

[#5]

Yeah The code I used is exactly what you gave me. I know it is targeting the right element/selector because I published the test and the correct link is changing, it's just not disappearing. It is reloading the page.

[#6]

To clarify: I didn't use the EXACT code you gave me. I put in correct selector.

[#7]

Could you please share your current variation code and the page you're trying to edit the link on?

[#8]

$("#region-menu").css({"display":"none", "visibility":""});
$("#zone-postscript-wrapper").css({"display":"none", "visibility":""});
$("#region-user-second").css({"display":"none", "visibility":""});
$("#region-footer-first").css({"display":"", "visibility":"hidden"});
$("p > img").removeAttr("src").removeAttr("srcdoc");
$("p > img").css({"display":"none", "visibility":""});
$(".logo-img > a").attr({"href":""});

http://www.studyisland.com/products/home

The logo links back to the homepage and that is the hyperlink I'm trying to remove (along with other elements) for a certain audience. Currently, with this code, the logo no longer sends you to the homepage, but it still is clickable and just reloads the page.

[#9]

You need to change the selector to #responsive-logo for mobile, and #logo for desktop. If that doesn't work, try unwrapping as follows:

$('#logo').find('img').unwrap();

[#10 · Accepted solution]

Remove the <a> entirely using .detach() or .remove().

$(".logo-img > a").remove();

But - since your image is inside the <a>, that will make your logo disappear too.

So what you need to do instead is detach() the image, .remove() the <a> and the put the image back into the right spot:

var logo = jQuery('#logo');
jQuery(logo).detach();
jQuery('.logo-img a').remove();
jQuery(logo).appendTo('.logo-img');

[#11]

Or, use .unwrap() as @robertchan suggested (I keep forgetting about this method...)

[#12]

---

@nap0leon wrote:

Or, use .unwrap() as @robertchan suggested (I keep forgetting about this method...)

---

@JDahlinANF The code you provided did the trick!

What I used:
var logo = jQuery('#logo');
jQuery(logo).detach();
jQuery('.logo-img a').remove();
jQuery(logo).appendTo('.logo-img');

@robertchan Thanks for all the replies! I couldn't quite figure out how to make your method work, but I didn't keep trying once I found that the above worked.

Thanks again to both of you for the help!