Question

I know how to hide elements,

$('#edit0').hide();

However this doesn't hide the edit image. The edit image does not have an id. Any ideas on how to hide or remove it.

EDIT: I'm adding the anchor tag causing this problem.

<a class="actionButton2 icon" onclick="return TabManager.clickChangeView(event, 'edit');" href="default.asp?pg=pgEditBug&amp;ixBug=326&amp;command=edit&amp;ixBugEventLatest=1794" onmouseover="return true; return true;" onmouseout="return true;"><img src="images/Edit.gif" border="0"></a> 
<a class="actionButton2" onclick="return TabManager.clickChangeView(event, 'edit');" href="default.asp?pg=pgEditBug&amp;ixBug=326&amp;command=edit&amp;ixBugEventLatest=1794" id="edit0" command="edit" onmouseover="return true; return true;" onmouseout="return true;">Edit</a>

Answer 1

What version of FogBugz are you using? In current versions of FogBugz, hiding the edit action's anchor tag should also hide its associated icon (the icon is rendered using a pseudo-element).

The following script should work for both current as well as older (e.g., 8.6.50) versions of FogBugz:

$('#edit0,#edit1').hide().prev('.icon').hide();

The problem in older versions of FogBugz is that the edit button's text and its icon are separate <a> tags, but only the text anchor has an id attribute. This script removes the anchors that have ids as well as the immediately-preceding .icon elements (which only exist in older versions of FogBugz).

Answer 2

The image is not a regular <img> HTML tag. It is a css trick, like this (simplified a bit):

.icon-left.edit::before {
  background-position: 0px -61px;
  height: 16px;
}
.icon-left::before {
  content: " ";
  background-image: url(sprites/sprite-icons.png);
  width: 16px;
  float: left;
}

See those background-position numbers? They specify which part of the styles/sprites/sprite-icons.png image to show before the Edit button.

For me (using Chrome) hiding the #edit0 link also hides the pencil-on-paper image. But I have found browser support for ::before to vary. What browser did you use?

Maybe hiding the parent <li> works more reliably, like this:

$('#edit0').parent().hide();

---

I noticed hiding #edit0 only hides the Edit button from the top bar, not from the bottom bar. That's because id's should be unique (FogBugz returns invalid HTML!) and jQuery only finds the first.

If that's what you mean, just use something like this instead:

$('li a.edit').hide();