anyway to delete all <a href=> tags with javascript after the page loads on an iPad?

Question

I know that I can run a line of javascript code after the page loads on an iPad with UIWebView (which is what I am using), but I do not know what I could type to go through and remove all of the tags. I also would like to be able to do this to only certain parts of the page e.g. only remove tags within a certain tag.

Answer 1

You can get all elements by tag name using document.getElementsByTagName(). All links have the tag name a. You can visually remove them by setting their display style to none.

var elements = document.getElementsByTagName('a');
for (var i = 0; i < elements.length; i++) {
    elements[i].style.display = 'none';
}

To remove elements of a certain tag within a certain tag, just invoke getElementsByTagName() on the element in question. Suppose that you want to hide all links inside a <li> only:

var listitems = document.getElementsByTagName('li');
for (var i = 0; i < listitems.length; i++) {
    var anchors = listitems[i].getElementsByTagName('a');
    for (var j = 0; j < anchors.length; j++) {
        anchors[j].style.display = 'none';
    }
}

The element.parentNode.removeChild(element) is also a good one, but it doesn't work nicely inside a standard for loop. You need to loop backwards:

var elements = document.getElementsByTagName('a');
for (var i = elements.length; i-- > 0;) {
    var element = elements[i];
    element.parentNode.removeChild(element);
}

---

Update as per the clarified functional requirement: you thus want to replace the link element with a text node representing the link's original content? You can use Node.replaceChild() for this. Here's a kickoff example:

var elements = document.getElementsByTagName('a');
for (var i = elements.length; i-- > 0;) {
    var element = elements[i];
    var text = document.createTextNode(element.firstChild.nodeValue);
    element.parentNode.replaceChild(text, element);
}

Answer 2

Thought I'd post a remove() function to complement BalusC:

function remove(el){
   if(el.parentNode)el.parentNode.removeChild(el);
}

Note: If the element doesn't have a parent, it means it is not in the DOM tree. It also means it will be removed in the GC's (garbage collector) next run (as long as there are no references to it).

Answer 3

If you're going to be doing a lot of dom manipulation, it might be worth it to include jQuery to grab your elements. It'd be a little easier to remove items. Eg.

$(function(){
   $('.surrounding_class a').remove();
});

Answer 4

If you want to remove links but preserve their display contents (text, images, etc.) you can insert their childNodes before the links, then remove the link elements:

var removeLinks = function(context) {
    var undefined;
    if(context === undefined) {
        context = document;
    }
    if(!context) {
        return false;
    }
    var links = context.getElementsByTagName('a'), i, link, children, j, parent;
    for(i = 0; i < links.length; i++) {
        link = links[i];
        parent = link.parentNode;
        if(!link.href) {
            continue;
        }

        children = link.childNodes;
        for(j = 0; j < children.length; j++) {
            parent.insertBefore(children[j], link);
        }
        parent.removeChild(link);
    }
    return context;
};

// Use:
removeLinks(document.getElementById('container'));