How to remove a link with jQuery or JavaScript? - javascript

I hope to remove the link "ContactUs.aspx" of the following code, I use the code $("#Main4").contents().unwrap(); it worked, but the class "LeftMainMenu" is removed also.
I hope to remove only the link, how can I do this?
<a id="Main4" class="LeftMainMenu" href="ContactUs.aspx">Contact Us</a>

<a id="Main4" class="LeftMainMenu" href="ContactUs.aspx">Contact Us</a>
This will remove the href attribute:
$("#Main4").removeAttr("href")
Remember to do it on page load event like below:
$(function() {
$("#Main4").removeAttr("href")
});
Or if you just want to remove the value of href then
$("#Main4").attr("href", "")
This will make
<a id="Main4" class="LeftMainMenu" href="">Contact Us</a>
DEMO:
$(function() {
$("#Main4").removeAttr("href")
});
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
<a id="Main4" class="LeftMainMenu" href="ContactUs.aspx">Contact Us</a>

Your jQuery selector is wrong. Should be $("#Main4"). You can use .removeAttr() to remove the attribute of href. See the documentation here.
$("#Main4").removeAttr('href');

To remove the href you can use
$('#Main4').removeAttr('href');
To remove only the link you can use
$('#Main4').attr('href','');

if you want the link hidden, you can:
$('#main4').hide();
if you want the link disabled, you can:
$('#main4').removeAttr('href');
or
$('#main4').attr('href','#');
or
$('#main4').attr('href','javascript:void(0);');
By the way, the different href attribute about
'javascript:void(0)' and '#' is there.

Related

JQuery on click link with href atribute

I have the following code structure. Its a set of wordpress tabs. I have many tabs all over the website, using Jquery i want to trigger a function when a user clicks one of the links, however i cant apply a ID atribute so my funtion below doesnt work...any suggestions?
JQUERY
$('#1485856532455-70ee0dfe').on('click', function() {
$('.otherdiv').css('background-image', 'url(http://placehold.it/200x200/ff0000)');
})
HTML
<ul class="vc_tta-tabs-list">
<li class="vc_tta-tab">
<span class="vc_tta-title-text">Title</span>
</li>
<li class="vc_tta-tab">
<span class="vc_tta-title-text">Title</span></li>
</ul>
You can't select them by ID because they don't have IDs. But you can use CSS Atrribute-Equal Selector to get them by href attribute. Like this:
$('[href="#1485856532455-70ee0dfe"]').on('click', function() {
// ...
}
More CSS Selectors here.
Working code snippet:
$('[href = "#1485856532455-70ee0dfe"]').click(function() {
alert("#1485856532455-70ee0dfe was clicked! Hoooray!");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="vc_tta-tabs-list">
<li class="vc_tta-tab">
<a href="#1485856532455-70ee0dfe"> <span class="vc_tta-title-text">Title</span>
</a>
</li>
<li class="vc_tta-tab">
<span class="vc_tta-title-text">Title</span>
</li>
</ul>
Use attribute selector then :
$('[href="#1485856532455-70ee0dfe"]').on('click', function() {....});
$('#1485856532455-70ee0dfe').on('click', function() { - means that on page we have some element with id 1485856532455-70ee0dfe. In your html code no id with text 1485856532455-70ee0dfe, thats why your code not work.
You have two case to fix:
add id's to needed element
change js to $('[href="1485856532455-70ee0dfe"]').on('click', function() {
You cant give a id to a link like that. However you can select the link with jquery by doing $('[href="#1485856532455-70ee0dfe"]').on('click', function() {....});

Assigning onclick via jQuery selector

I am trying to assign an anchor's onclick via javascript - see jsfiddle below:
<a id="link_a" class="linka" href="http://www.google.com">link 1</a>
var lnkA=$('.linka');
lnkA.onclick=function(){alert(this.innerHTML);};
fiddle:
https://jsfiddle.net/andrewtr/tkfvyr7o/ Code:
However, it doesn't seem to work. What am I doing wrong? Thanks!
lnkA is a jQuery object which have a method called click to register click handlers
var lnkA = $('.linka');
lnkA.click(function(e) {
e.preventDefault();//to prevent redirection
alert(this.innerHTML)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="link_a" class="linka" href="http://www.google.com">link 1</a>
<a id="link_b" href="http://www.duckduckgo.com">link 2</a>
http://learn.jquery.com/
http://api.jquery.com/

How to make this JS link work?

I want to put a site link in my site and I don't want to show it in the status bar, so I used this code below but it's not clickable.
<a rel"nofollow" href="javascript:;" onclick="location.href='http://sitelink">text</a>
And, is the rel"nofollow" work with this code?
Try:
<a rel="nofollow" href="#" onclick="location.href='http://sitelink'">text</a>
rel is an attribute so use an =
use # in the href so that the link does target the current page
in the onclick you have a mess with the quotes, you forgot the closing '
But instead of misusing an a tag you could also use a button or span for your purpose:
<button onclick="location.href='http://sitelink'">text</button>
Try this:
<a rel="nofollow" href="Javascript:void(0)" onclick="window.location='http://sitelink'">text</a>

Calling a javascript and opening a link

I want to call a javascript and jump to a specified div by clicking on Text.
Here is the javascript I am using:
function hide(parameter) {
document.getElementById(parameter).style.visibility = "hidden"
}
and here the text that should call it:
<a id="text" href="Page.html#foo" href="javascript: hide('text')">Text Text</a>
I just don't know why it doesn't work.
You cannot add a second href attribute to your a tag. Try onclick instead:
<a id="text" href="Page.html#foo" onclick="hide('text')">Text Text</a>
#user3155154's answer is the "best" way to do it, but, if you're interested, this will work too:
<a id="text" href="javascript:hide('text');window.location.href='Page.html#foo';void(0)">Text Text</a>

how to simplify my code using jquery?

I want append <span></span> tag in my every <a> tag:
now:
<a href=#>aaa</a>
<a href=#>bbb</a>
<a href=#>ccc</a>
I want:
<a href=#><span>aaa</span></a>
<a href=#><span>bbb</span></a>
<a href=#><span>ccc</span></a>
now ,i using below codes to implement it:
$(function(){
var buttons = $("a");
var text=buttons.text();
buttons.text("");
buttons.prepend("<span>"+text+"</span>");
});
I think this codes is not good,how to simplify it?
thanks :)
I think What you are looking for is the wrapinner function.
$("a").wrapInner("<span></span>")
You can find a working example here.

Categories

Resources