How to remove a "href" from a <a> tag with Jquery/Javascript?

Question

I have a tag <a> with hyperlink properly set. However, I would like to remove it when firing from an event. The same tag has a properly set ID, too (unique, valid, and related).

I wonder if there is a function to remove the attribute href and thus make the link invalid, or if there is a way to just disable that link.

Answer 1

The modern solution to disable a link is CSS only: (for modern browsers)

$('#minhaID').css("pointer-events", "none");

// e para re-activar basta usar:
$('#minhaID').css("pointer-events", "");

Demo

You can use it too:

$('#minhaID').attr("href", "");

Or else:

$('#minhaID').removeAttr('href'); // note que esta opcção remove algumas caracteristicas importantes do elemento como focus.

depending on the use you want to give.

Note: Chrome has an open discussion about the ability to stop supporting Pointer-Events.

Answer 2

Would just be that?

$('a').removeAttr('href');

Answer 3

There are several ways, by pure javascript the ideal is that you use the reference of your element and in it use the method removeAttribute, examples:

document.querySelector('#minhaAncora').removeAttribute('href');
document.getElementById('minhaAncora').removeAttribute('href');

But when you remove this property from the anchor, this anchor ceases to function as anchor, losing the characteristics of the pseudo selectors :hover, :active, :focus and :visited what can be an unwanted behavior.

In this case you can replace the attribute value with a hash, example:

document.querySelector('#minhaAncora').setAttribute('href', '#');

However this can influence the browser scroll depending on the elements and page size, so another solution is to put in place a script that does nothing, example:

document.querySelector('#minhaAncora').setAttribute('href', 'javascript: ');

It will maintain anchor properties but will do nothing when clicked. Because the browser interprets this as an "evaluation" of code during the click event, but since there is no code, it ignores the command.

Tip for those who use jQuery would look like this:

$('#minhaAncora').attr('href', 'javascript: '); // modifica pra não fazer nada
$('#minhaAncora').attr('href', '#'); // faz o scroll mover-se para inicio do documento, mas não muda de página
$('#minhaAncora').removeAttr('href'); // remove o atributo da tag

If you do not want to remove, you can use the pointer-event CSS to invalidate the use of cursor events in the tag, but this does not remove the link that can still be accessible with Focus (use tab) then enter, only modern browsers have support.

If you don’t want to remove the attribute, but just remove their event, you can prevent the default action with the following code:

document.querySelector('#minhaAncora').addEventListener('click', function (e) {
    e.preventDefault();
});
// Compatível com todos browsers modernos, IE antigos precisa retornar false
// e a forma de adicionar eventos é por outro método.
// No caso use o jQuery:
$('#minhaAncora').on('click', function (e) {
    e.preventDefault();
});

Answer 4

I suggest, in addition to removing the attribute, adding a style to be visible to the user:

$('#link').removeAttr('href').css({
    'cursor': 'not-allowed',
    'color': '#AAAAAA',
    'text-decoration': 'line-through'
});

Example in jsfiddle.

Answer 5

Using pure javascript:

document.getElementById('id').removeAttribute('href');

Answer 6

If this is your case, you can also cancel the default anchor redirect event with the event itself:

$('a[href]').on('click', function(event) {

    event.preventDefault();

});