How can I remove a whole 'a' tag from a div using javascript?

Question

I'm using this widget/snippet:

<div class="tbnet-gadget">
    <div id="tbnet-g4">Carregando...</div><a id="tbnet-link" href="http://www.tabeladobrasileirao.net/" target="_blank" class="tbnet-link" title="Tabela do Brasileirão">Tabela do Brasileirão</a>

    <script async src="http://gadgetsparablog.com/ws/tabeladobrasileirao/script?funcao=g4&campeonato=serie-a" type="text/javascript"></script>
</div>

This widget forces a link on the bottom of it (Tabela do Brasileirão). If I change the href tag, the widget won't work.

I want to still use this widget, but I'm trying to remove that link from the bottom of it.

I managed to remove the href attribute using document.getElementById("tbnet-link").removeAttribute("href");, but the text "Tabela do Brasileirão" is still showing up.

This is how it looks like on JSFiddle: http://jsfiddle.net/3nhwf6tw/

How can I remove the whole <a id="tbnet-link"...Brasileirão</a> using javascript?

Thanks.

http://jsfiddle.net/3nhwf6tw/#&togetherjs=1DF8EF6xuh

try `document.getElementById("tbnet-link").style.display="none";` instead to just hide it — Darren Wainwright, Sep 12 '14 at 20:09
Your widget has security built in, exactly so you can't remove that link. — adeneo, Sep 12 '14 at 20:16

score 2 · Answer 1 · answered Sep 12 '14 at 20:12

2

To remove the element:

var el = document.getElementById("tbnet-link");
el.parentNode.removeChild(el);

To just clear the text:

var el = document.getElementById("tbnet-link");
el.innerHTML = ""

answered Sep 12 '14 at 20:12

OhleC

2,821
16
29

Thanks. The problem with that is that the widget identifies that something was changed, and then shows an error message. See: http://jsfiddle.net/7s3apztj/ – munich Sep 12 '14 at 20:15

imtheman · Accepted Answer · 2014-09-12T21:12:42.547

2

How about just using CSS instead:

#tbnet-link{
    display: none !important;
}

JSFiddle

Here is the non-CSS version (which is a bit ridiculous):

You can remove this:

<a id="tbnet-link" href="http://www.tabeladobrasileirao.net/" target="_blank" class="tbnet-link" title="Tabela do Brasileirão">Tabela do Brasileirão</a>

If you add this jQuery and remove the script in your html:

$.getJSON("http://54.207.27.130/ws//tabeladobrasileirao/g4.jsonp?callback=?&campeonato=serie-a&time=None", function(k) {
            $("#tbnet-g4").html(k.html.replace(/\<script.*?\<\/script\>/, ""));
        });

JSFiddle no-CSS

edited Sep 12 '14 at 21:12

answered Sep 12 '14 at 20:17

imtheman

4,713
1
30
30

Thanks! Although it didn't use javascript, it indeed hid what I was trying to hide. I'll wait to see if somebody can do it using javascript before assigning the best answer. – munich Sep 12 '14 at 20:25
@viniciusmunich CSS is the only good option (unless you deconstruct the JSON call, which I did and will post). If you take a look at the code in the script you call, it checks for the link (so you cannot remove it), it clears all attributes you try to add to it, and the JSON it loads check that the link is there unaltered (except for the href attribute apparently). – imtheman Sep 12 '14 at 21:05

score 1 · Answer 3 · answered Sep 12 '14 at 20:07

1

If you're up for jQuery, it's really easy:

$(function(){
    $("#tbnet-link").remove();
});

answered Sep 12 '14 at 20:07

Liftoff

24,717
13
66
119

That won't work as the widget identifies that the `href` was changed, and shows an error message. Maybe that works if executed after the whole widget has been loaded. How could I make it run after the widget has loaded? – munich Sep 12 '14 at 20:10
If you're removing the entire tag, why bother changing the href? Either way, jQuery runs after the page loads. Remember to import it. Check the edit. – Liftoff Sep 12 '14 at 20:12

How can I remove a whole 'a' tag from a div using javascript?

3 Answers3