Hide A element with CSS or Javascript - Stack Overflow

admin管理员组

文章数量:1024016

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 .aspx It's the top banner there. Let me know how to hide it from the page. Thanks.

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.

• javascript
• css

Share Improve this question Follow asked Jan 6, 2013 at 11:18 user1929719user1929719 9311 silver badge55 bronze badges 4

• Add a class to this a tag by adding the class="someclass" attribute to the tag definition, then in your css, add a.someclass { display: none; }. – user827080 Commented Jan 6, 2013 at 11:20
• @Jan Westerdiep your ment is not very useful, because he said, that he cant change the provided code... – lukasgeiter Commented Jan 6, 2013 at 11:28
• Can you tell us about the parent tags of your a tag? – Siamak Motlagh Commented Jan 6, 2013 at 11:30
• @user1929719 I think it can be done only by css too. – Siamak Motlagh Commented Jan 6, 2013 at 11:33

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 5

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.

Use:

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

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 (e.g. price/title/url) before deciding to hide.

Use jQuery if raw javascript is to much for you.

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");

You could try it with css:

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

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

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 ment 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 ment 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!

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 .aspx It's the top banner there. Let me know how to hide it from the page. Thanks.

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.

• javascript
• css

Share Improve this question Follow asked Jan 6, 2013 at 11:18 user1929719user1929719 9311 silver badge55 bronze badges 4

• Add a class to this a tag by adding the class="someclass" attribute to the tag definition, then in your css, add a.someclass { display: none; }. – user827080 Commented Jan 6, 2013 at 11:20
• @Jan Westerdiep your ment is not very useful, because he said, that he cant change the provided code... – lukasgeiter Commented Jan 6, 2013 at 11:28
• Can you tell us about the parent tags of your a tag? – Siamak Motlagh Commented Jan 6, 2013 at 11:30
• @user1929719 I think it can be done only by css too. – Siamak Motlagh Commented Jan 6, 2013 at 11:33

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 5

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.

Use:

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

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 (e.g. price/title/url) before deciding to hide.

Use jQuery if raw javascript is to much for you.

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");

You could try it with css:

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

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

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 ment 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 ment 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!

本文标签： Hide A element with CSS or JavascriptStack Overflow