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.

Answer 1

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.