Question

I am currently trying to manipulate a unordered list with jQuery, essentially I have a list of links in an unordered list, certain users only have access (all set server side) to certain files / pages.

I was hoping to use some jQuery to remove a few list items from the DOM, simply because it’s more appealing to me to not have the user click on a link, load the page and then be displayed an error because they have insufficient access.

I already have an object setup, and have successfully removed one standalone link from the DOM, although I can’t seem to get the selector right to remove the list items.

List HTML:

<div id='browse' class='bubble'>  <blockquote> <ul id='browses'> <li><a href='browse.php?id=15' class='browse'>Access</a><br /></li> //trying to remove <li><a href='browse.php?id=1' class='browse'>Accounts</a><br /></li> //trying to remove <li><a href='browse.php?id=2' class='browse'>Browse's</a><br /></li> //trying to remove <li><a href='browse.php?id=7' class='browse'>Commands</a><br /></li> //trying to remove <li><a href='browse.php?id=4' class='browse'>Content</a><br /></li> <li><a href='browse.php?id=8' class='browse'>Logs</a><br /></li> <li><a href='browse.php?id=10' class='browse'>Sessions</a><br /></li> <li><a href='browse.php?id=11' class='browse'>Settings</a><br /></li> //trying to remove <li><a href='browse.php?id=12' class='browse'>Sites</a><br /></li> //trying to remove </ul>    </blockquote> <cite>Browse and manage the currently active sites data</cite> </div> 

Object thus far:

Session = function(){     this.init(phpdev_session); }  $.extend(Session.prototype, {     // object variables     vars: '',      init: function(phpdev_session){         // do initialization here         this.vars = phpdev_session;     },      restrict: function() {         if (this.vars.account_class == '40') {             //access client or less, remove manage another site link and a few browses from #browse ul             //note: its all restricted server side, so its just a presentation layer.             $('a#activate').remove();             $('#browses').remove('li:eq(0)').remove('li:eq(1)').remove('li:eq(2)').remove('li:eq(3)').remove('li:eq(7)').remove('li:eq(8)');         }     } });  $(document).ready(function() {     var session = new Session(phpdev_session);     session.restrict(); }); 

Answer 1

I don’t think jQuery is the right tool for this (I would do it server-side), but I would add a class server-side to the items they don’t have access to, then just do

$('.noAccess').remove(); 

If you’re going to do that though, just remove them server-side since you’ll have the code in place.