如何删除元素中的文本但显示其子元素

时间:2015-05-10 19:37:13

标签: html css

我目前正在制作一个自定义网站CSS但遇到了一个我无法在网上找到的问题。我试图删除span的值但显示其中的元素,在本例中为a。 示例中的期望结果是单词Foo!&没有Bar!的{​​{1}}。

-

这不起作用,相当明显,但无论如何都会显示我的尝试,(它会删除所有内容)。

<style>
    span
    {display: none;}
    span a
    {display: block}
</style>

<span>
    - <a href="#">Foo!</a>
    - <a href="#">Bar!</a>
</span>

我的第二次尝试,也没有用,但我想不到更多。 (还删除所有内容)。 删除<style> span:not(a) {display: none;} </style> <span> - <a href="#">Foo!</a> - <a href="#">Bar!</a> </span> 不是问题,但反过来似乎很难。我要么愚蠢,要么尝试不可能的事情?

它为a构建,因此任何Firefox解决方案都可以。

提前致谢。

1 个答案:

答案 0 :(得分:3)

最简单的方法是:

span {
  font-size: 0;
}
span a {
  font-size: 16px;
}
<span>
    - <a href="#">Foo!</a>
    - <a href="#">Bar!</a>
</span>

或者,使用rem('root em')而不是px

span {
  font-size: 0;
}
span a {
  font-size: 1rem;
}
<span>
    - <a href="#">Foo!</a>
    - <a href="#">Bar!</a>
</span>

您的解决方案无法正常运行,因为在您第一次尝试的情况下:

span {
  display: none;
}
span a {
  display: block;
}

无法显示将“display”属性设置为“none”的元素的子元素。而且,你的第二个解决方案:

span:not(a) {
  display: none;
}

将匹配任何<span>元素,因为<span>无法(在任何情况下)都可以成为<a>元素。

如果JavaScript是一个选项 - 它不是一个要求,只是一个选项 - 那么以下也可以工作:

function removeSpanText(span) {
  // getting the childNodes of the <span>:
  var children = span.childNodes,
    // a counter to keep track of where we
    // are in the (following) while loop:
    count = 0,
    // the 'current' element upon which we'll
    // acting within said while loop:
    current = children[count];

  // while the live NodeList of the <span> element's
  // childNodes still contains a number of elements
  // AND the count variable is still less than that
  // number of elements (accidental infinite loops are
  // frustrating):
  while (children.length && count < children.length) {
    // if the current node has a nodeType of 3
    // and is therefore a textNode:
    if (current.nodeType === 3) {
      // we remove the current node:
      current.parentNode.removeChild(current);
    } else {
      // otherwise we increment the count variable:
      count++;
    }
    // and reset the current variable to
    // hold either the element at the current
    // count number (if we removed the Node) or
    // or to the incremented count number
    // (if the Node was not a textNode):
    current = children[count];
  }
}

// getting a reference to <span elements within the
// document:
var spans = document.getElementsByTagName('span');

// using Array.prototype.forEach(), with
// Function.prototype.call(), to iterate
// over that NodeList:
Array.prototype.forEach.call(spans, function(span) {
  // the name of the first argument (here: 'span') is
  // user-defined, but is always the current array-element
  // of the array over which we're iterating.

  // calling the function, passing the span variable
  // as the argument:
  removeSpanText(span);
});

function removeSpanText(span) {
  var children = span.childNodes,
    count = 0,
    current = children[count];
  while (children.length && count < children.length) {
    if (current.nodeType === 3) {
      current.parentNode.removeChild(current);
    } else {
      count++;
    }
    current = children[count];
  }
}

var spans = document.getElementsByTagName('span');

Array.prototype.forEach.call(spans, function(span) {
  removeSpanText(span);
});
<span>
    - <a href="#">Foo!</a>
    - <a href="#">Bar!</a>
</span>