ansaurus

Question

Lazyweb: Need javascript that removes li elements based on visited class of a element

Answer 1

+4 A:

1.You could use the a:visited css selector.

a:visited{
   display:none;
}

And it will hide visited links (at least in firefox).

2.If you want to remove the div and li above that, you would probably need to use a cookie and remember what links the user clicked.

So :

when a user clicks a link, put that link Id in the cookie. Then , for every link id in the cookie, you could do with jQuery something like :

var ids = $.cookie("cookie_with_ids");
var split_ids = ids.split(','); // split by comma

for(var i= 0; i<split_ids.length; i++){
    $("link_"+split_ids[i]).parent().parent().hide();
}

The html should look something like :

<li class="result">
 <div class="avatar">
  <a href="#" id="unique_link_id_on_this_page"> ....

This is not tested by any means, but it should give you an ideea about what you have to do.

For cookie handling you could use the jquery cookie plugin

sirrocco 2009-01-11 10:14:52

The first method should work. Do that!

jacobangel 2009-01-11 15:10:35

By "the first method" do you mean the CSS trick which will hide the avatar but not the line item nor the rest of the stuff in the line item?Also, I guess I should have made it more clear than just sticking it in a tag: this is for greasemonkey. I don't own the site.

2009-01-11 21:52:13

Answer 2

A:

Please note that I haven't used Greasemonkey before and my JS knowledge is simplistic at best.

Couldn't you add a style declaration to either the existing <style> tag or the <head> using JavaScript?

For example, add a rule that applies different colours to different links:

li.result div.avatar a {
    color: #000;
}

li.result div.avatar a:visited {
    color: #111;
}

Then traverse through all li elements classed result, checking if the a contained within it has a colour of #000 or #111. In my mind that would create a basic :visited checker. I'm going to have to test it now (if only to learn something) but is this kind of thing viable?

Ross 2009-01-11 22:36:43

Technically I could use stylish to change the CSS of a page, the problem is CSS doesn't do the 'if then' things required to remove the whole line item based on the visited selector of an anchor inside a div. I'm doing it on results for search.twitter.com if that helps you test.

2009-01-12 05:34:30

Answer 3

A:

Here's the one a friend whipped up for me that works perfectly. Mainly posting in case someone else ends up finding it useful.

// ==UserScript==
// @name           Twitter Search Seen
// @namespace      http://ctho.org
// @description    Hides tweets you've seen
// @include        http://search.twitter.com/*
// ==/UserScript==

for each (var i in document.links) {
    if (i.parentNode.className == "msg" && i == i.parentNode.childNodes[1]) {
//alert(getComputedStyle(i, null).color);break;
     if (getComputedStyle(i, null).color == "rgb(147, 13, 133)") {
      i.parentNode.parentNode.style.display="none";  
     } 
    }
}

Hackish, yeah, you could theoretically use stylish to set visited links to a known color as well.

2009-01-13 02:56:07

ansaurus

tags:

views:

answers:

Lazyweb: Need javascript that removes li elements based on visited class of a element

related questions