Remove dom elements by matching href with javascript

Question

I need to remove some 'a tags' that have img's in them only if the a href matches exactly. This is the code that needs to be removed-

<a class="slideshow" href="?Action=thumbnail&Width=500&Height=500&algorithm=proportional" rel="lightbox[eventer]" onclick="myLightbox.start(this); return false;">
    <img src="?Action=thumbnail&Width=80&Height=80&algorithm=fill_proportional">
</a>

So if the href is equal to the one above, the 'a tag' and 'img' need to be removed from the dom.

======edit=======

I am using a proprietary CMS that spits out tags within href and src tags, I can't actually edit the code surrounding the url which makes it a bit pokey.

Removed old version of my code from your question.

jfriend00
– jfriend00

2012-05-10 01:33:52 +00:00
Commented May 10, 2012 at 1:33 — jfriend00
– jfriend00, Commented May 10, 2012 at 1:33

jfriend00 · Accepted Answer · 2012-05-09 13:19:24Z

7

You can use code like this that will work in all browsers:

var links = document.getElementsByTagName("a"), item;
var urlBase = '?Action=thumbnail&Width=500&Height=500&algorithm=proportional';
var urlFull = window.location.href + urlBase;
for (var i = links.length - 1; i >= 0; i--) {
    item = links[i];
    if (item.href == urlFull || item.href == urlBase) {
        item.parentNode.removeChild(item);
    }
}

Note: the code traverses the list in reverse order so that when items are removed from the DOM and the live node list changes, it won't affect the rest of the traversal.

Because item.href will usually return a fully qualified URL and not exactly what was in the original source HTML, we test it against both a fully qualified match and against what we were expecting in the source HTML.

edited May 9, 2012 at 13:19

answered May 9, 2012 at 5:33

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

RobG Over a year ago

Why not var links = document.links; so you ony get links, not anchors. Isn't the test just the href? so if (links[i].href == ' ')

jamesmortensen Over a year ago

+1 for not using a nested for loop like I was planning on doing before I decided to withdraw. Also like the use of the indexOf method. Very clever!

jfriend00 Over a year ago

@RobG - xxx.href will return a fully qualified URL so comparing equality to the relative URL will never work. That's why I use indexOf(). document.links would work too though it gets <area> tags too - I just chose a different way to get the links.

Nik Over a year ago

That actually removes all the links on the page that contain the href string, so even the links that have an image path before the string are removed.

jfriend00 Over a year ago

@Nik - feel free to make minor modifications to the href comparison if you have more specific requirements. The thing you need to understand is that .href always returns a fully qualified URL so if you don't want a certain path in the front of the URL, then you will have to revise the test to exclude the conditions you don't want it to match.

|

Joseph · Accepted Answer · 2012-05-09 05:38:58Z

3

You can use querySelectorAll() and removeChild()

var url = '?Action=thumbnail&Width=500&Height=500&algorithm=proportional',
    as = document.querySelectorAll('a[href="'+url+'"]'),
    i, node;

for(i=as.length;i--;){
    node = as[i];
    node.parentNode.removeChild(node);
}

support for querySelectorAll

edited May 9, 2012 at 5:38

answered May 9, 2012 at 5:32

Joseph

120k31 gold badges186 silver badges238 bronze badges

6 Comments

jfriend00 Over a year ago

Are people dropping support for IE7 now so it's cool to use querySelectorAll() with no fallback? In projects where I don't already have an XP selector engine, I use Sizzle myself, but because I still want my pages to work in IE7, I don't use querySelectorAll() directly without a fallback mechanism.

Joseph Over a year ago

@jfriend00 well, i was about to do the same thing as your answer, but i though I'd do something different since you already provided it. That's why I also posted the compatibility table to show what is supported.

RobG Over a year ago

@Joseph—the table is wrong, qSA is not supported in the IE 8 that one I have avaiable.

Joseph Over a year ago

@RobG as what I have come across, it works in IE8 in strict mode and limited only to CSS2.1, so it's limited.

Joseph Over a year ago

@Nik This is not cross-browser friendly without fallbacks as jfriend00 mentions. I suggest you use his answer instead.

|

Trevor Norris · Accepted Answer · 2012-05-09 06:18:17Z

1

I like Joseph's answer, but if you need to work with browsers that don't handle querySelectorAll() then you can use something like the following:

var url = '?Action=thumbnail&Width=500&Height=500&algorithm=proportional',
    elems = document.getElementsByTagName( 'a' ),
    i = 0;
for ( ; i < elems.length; i++ ) {
    if ( elems[i].href && elems[i].href.indexOf( url ) !== -1 ) {
        elems[i].parentNode.removeChild( elems[i] );
    }
}

edited May 9, 2012 at 6:18

answered May 9, 2012 at 5:43

Trevor Norris

21.3k4 gold badges29 silver badges28 bronze badges

4 Comments

jfriend00 Over a year ago

.href will return a fully qualified URL so the comparison you're doing will never match.

Trevor Norris Over a year ago

heh. i'm a retard. you're right. i've updated my code so it will work.

jfriend00 Over a year ago

If you follow the comments on my answer, .indexOf() doesn't do what the OP wants either. You also have problems because elems is a live nodeList so it changes when you call removeChild() which messes up your iteration.

Trevor Norris Over a year ago

well, that's what I get for casually answering questions while working on other stuff. looks like you have it covered.

Collectives™ on Stack Overflow

Remove dom elements by matching href with javascript

3 Answers 3

13 Comments

6 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

13 Comments

6 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related