Invisible anchors can't be removed with javascript

Question

I've got two links that I need to hide/remove with javascript. All my attempts to do so have failed. The anchors are defined inside of a <td> like this:

<td>
      <a id="btnReplaceAll" onclick="LaunchUploader(this, true);this.blur();return false;" href="javascript:void(0);" class="btnMed"><span>Replace All</span> </a>
</td>

First I tried the obvious:

document.getElementById('btnReplaceAll').style.display = 'none';
document.getElementById('btnRetainAll').style.display = 'none';

But they still show up. Then I tried this:

var btnReplaceAll = document.getElementById('btnReplaceAll');
var btnRetainAll = document.getElementById('btnRetainAll');
btnReplaceAll.parentNode.removeChild(btnReplaceAll);
btnRetainAll.parentNode.removeChild(btnRetainAll);

How do I get rid of these things with javascript? Please, no jQuery.

Problem was duplicate IDs. There were elements defined with the same IDs in another file but the files all get assembled by .net so I didn't notice the duplication.

Your example works for me. Can you use a developer bar to look for javascript errors? — Andre Calil, Jul 31 '13 at 20:07
This already works perfectly. See this fiddle: http://jsfiddle.net/WHLnL/ — jcsanyi, Jul 31 '13 at 20:08
You're showing this as links contained within a table. Do all your tags have unique IDs? If not, your code won't work in all sorts of ways. — , Jul 31 '13 at 20:08
what triggers your script? any chance your page reloaded after the script is executed? — mfeingold, Jul 31 '13 at 20:09

score 0 · Answer 1 · answered Jul 31 '13 at 20:08

Are you trying to remove them, or just hide them?

If you want to remove them, this should work:

var btnReplaceAll = document.getElementById('btnReplaceAll');
btnReplaceAll.parentNode.removeChild(btnReplaceAll);
var btnRetainAll = document.getElementById('btnRetainAll');
btnRetainAll.parentNode.removeChild(btnRetainAll);

It looks like you already tried that though.

Which means, you likely have some other JavaScript which is adding them back in as soon as you take them out. I would try adding a throw new Error() after that line just as a test. If they disappear with that line after the block above, but stay without it, it means something is putting them right back in.

It would seem to be the same deal if you just want to hide them, since what you have should also do the hiding.

Also, this may seem obvious, but just double-check that the IDs you are using really are the IDs they are set to (double-check character case and stuff as well).

Additionally, if they are in an Iframe that isn't the same place you are trying to do the removal code, it won't work as well. You can check this by outputting with console.log(btnReplaceAll) (after you set the variable) and just make sure it is non-null.

score 0 · Answer 2 · answered Jul 31 '13 at 20:09

I'd need to see what your DOM looks like to see where btnRetainALL is .. but for your one button shown in the example, you can do this to delete it from the DOM:

<a id="btnReplaceAll" onclick="LaunchUploader(this, true);this.parentNode.removeChild(this);return false;" href="javascript:void(0);" class="btnMed"><span>Replace All</span> </a>

score 0 · Answer 3 · answered Jul 31 '13 at 20:11

This code should work:

document.getElementById('btnReplaceAll').style.display = 'none';

But apparently you have more than one control with the same id and that's why it fails. If that's the case, I would rather add a specific class to all of them and do:

var elements = document.getElementsByClassName('your_class');
for(var i in elements)
    elements[i].style.display = 'none';

score 0 · Answer 4 · answered Jul 31 '13 at 20:17

Seems like you may have duplicate ids. If that is the case try using this code instead:

Markup:

<table id="myTable">
    <tr>
        <td>
      <a onclick="LaunchUploader(this, true);this.blur();return false;" href="javascript:void(0);" class="btnMed"><span>Replace All</span></a>
        </td>
                <td>
      <a onclick="LaunchUploader(this, true);this.blur();return false;" href="javascript:void(0);" class="btnMed"><span>Replace All</span></a>
        </td>
                <td>
      <a onclick="LaunchUploader(this, true);this.blur();return false;" href="javascript:void(0);" class="btnMed"><span>Replace All</span></a>
        </td>
                <td>
      <a onclick="LaunchUploader(this, true);this.blur();return false;" href="javascript:void(0);" class="btnMed"><span>Replace All</span></a>
        </td>
    </tr>
</table>

Javascript:

var tbl = document.getElementById("myTable");
var links = tbl.getElementsByTagName("a");

for (var i = 0; i < links.length; i++)
    links[i].style.display = "none";

That should hide them all inside your table.

JSFIDDLE

Invisible anchors can't be removed with javascript

4 Answers4