Hide A element with CSS or Javascript

Question

I have this element in my HTML page:

<a style="display:block;width:728px;height:90px;margin:0 auto;background:#EEE url('/_images/2011images/img_dotco_3.jpg') no-repeat top left; text-decoration:none;color:#000;" href="/domain-registration/dotco-overview.aspx?sourceid=bnrq2co728x90">
       <span style="float:right;margin:5px 27px 0 0;width:110px;color:#FFF;text-align:center">
          <span style="display:block;font-size:1em;text-align:center">NOW ONLY</span> 
          <strong style="display:block;font-size:1.6em;text-align:center"><!-- START TAG // Co_RegisterPrice_TLD -->
   <span class="Tag_Co_RegisterPrice_TLD"><strong>$35.70</strong>/yr</span>
<!-- End TAG // Co_RegisterPrice_TLD --></strong>       
       </span>    
    </a>

I need to hide it with CSS or Javascript. CSS would be the best scenario but Javascript is OK as well. The fact is that I cannot edit the HTML code at all, so I have no way to delete this item directly. Also this is not parent of any other HTML element, so I do not find an easy way to hide it with CSS.

Also I need to hide this A element even if the background image changes or the link changes, in fact it's not always the same.

I reported all the available HTML. Here is an example http://subdir.co/help-center/default.aspx It's the top banner there. Let me know how to hide it from the page. Thanks.

Answer 1

Try with jQuery:

$('a[href^="/domain-registration/dotco-overview.aspx?sourceid"]').hide();

This hides the a tag with a href attribute starting with /domain-registration/dotco-overview.aspx?sourceid .

Answer 2

采用：

document.getElementById('yourElementId').display=none;

Answer 3

i think adding class or making some rule for css selector woudn't work, because definition in attribute of the elements overrides another style definition. It will be easy if you use some javascript library for dom manipulating for example jQuery.

after that you can write something like

$(".sCntSub3 > a").hide()

you can try finding element from browser console. It is easy way how to verify you choose right element

Answer 4

You can traverse the dom tree from the class "Tag_Co_RegisterPrice_TLD" to find the A tag which you can then hide.

If you need to do additional logic then you can access the text (eg price/title/url) before deciding to hide.

Use jQuery if raw javascript is to much for you.

Answer 5

Since you cannot change the HTML code, you can't add an identifier to the element in order to select and manipulate it.

But you can use jQuery to select the first 'a' element, and set the 'display' property to 'none'.

I think something like this should do:

$('a:first').css("display","none");

Answer 6

You could try it with css:

a[style][href] {
   display: none !important;
}

Answer 7

jsFiddle Classname Method DEMO

jQuery via Classname: In this method we "look inside" the anchor for clues.

$(document).ready(function () {

  // To disable the line below, just comment it out just like this line is.
  $('.Tag_Co_RegisterPrice_TLD').closest('a').hide();

});

---

jsFiddle ID Method DEMO

jQuery via ID: This time, we don't look inside since anything can change. We now use a div reference!

$(document).ready(function () {

  // To disable the line below, just comment it out just like this line is.
  // No matter the unique ID code in front of MasterUpdatePanel Div, it will always be matched.
  $('[id$="MasterUpdatePanel"]').next('a').hide();

});

Shown here is a Firefox Screenshot of the HTML Page. Notice the Div ID contains ctl00_MasterUpdatePanel . The letters, numbers, and underscore in front of that may change, but not this keyword. Therefore, a match of the "ending part" of the id works!