使用CSS或Javascript隐藏元素

Question

我的HTML页面中有这个元素：

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

我需要用CSS或Javascript隐藏它。 CSS将是最好的方案，但Javascript也可以。 事实是我根本无法编辑HTML代码，因此我无法直接删除此项。此外，这不是任何其他HTML元素的父级，因此我找不到使用CSS隐藏它的简单方法。

此外，即使背景图像发生变化或链接发生变化，我也需要隐藏此A元素，实际上它并不总是相同。

我报告了所有可用的HTML。 这是一个例子http://subdir.co/help-center/default.aspx 这是那里的顶级横幅。 让我知道如何从页面中隐藏它。感谢。

Answer 1

尝试使用jQuery：

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

这会隐藏a标记，其href属性以/domain-registration/dotco-overview.aspx?sourceid开头。

Answer 2

使用：

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

Answer 3

我认为为css选择器添加类或制定一些规则是行不通的，因为元素属性中的定义会覆盖另一个样式定义。 如果你使用一些javascript库进行dom操作，例如jQuery，那将很容易。

之后你可以写一些像

这样的东西

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

您可以尝试从浏览器控制台中查找元素。如何验证您选择正确的元素

是一种简单的方法

Answer 4

您可以从“Tag_Co_RegisterPrice_TLD”类中遍历dom树，找到可以隐藏的A标记。<​​/ p>

如果您需要执行其他逻辑，则可以在决定隐藏之前访问文本（例如价格/标题/网址）。

如果原始javascript对您有用，请使用jQuery。

Answer 5

由于您无法更改HTML代码，因此无法为元素添加标识符以进行选择和操作。

但您可以使用jQuery选择第一个'a'元素，并将'display'属性设置为'none'。

我认为应该这样做：

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

Answer 6

您可以尝试使用css：

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

Answer 7

jsFiddle Classname Method DEMO

jQuery via Classname：在这个方法中，我们“查看”锚点以获取线索。

$(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通过ID：这一次，我们不会向内看，因为任何都可以改变。我们现在使用 div 引用！

$(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();

});

此处显示的是HTML页面的Firefox屏幕截图。请注意，Div ID包含ctl00_MasterUpdatePanel。前面的字母，数字和下划线可能会更改，但不会更改此关键字。因此，id的“结束部分”的匹配工作！