Question

我目前正在制作一个自定义网站CSS但遇到了一个我无法在网上找到的问题。我试图删除span的值但显示其中的元素，在本例中为a。示例中的期望结果是单词Foo!＆amp;没有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解决方案都可以。

提前致谢。

Answer 1

最简单的方法是：

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>

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

1 个答案: