如何隐藏元素中的文本内容但不隐藏子元素？

I have the following HTML structure and I want to hide the dot inside the td. The constraint is, I cannot change the HTML.

我有以下HTML结构,我想隐藏在td内的点。约束是,我不能改变HTML。

<td>•&nbsp;<a href="">Link 1</a></td>

I've tried using JavaScript, but it doesn't seem to work

我尝试过使用JavaScript,但似乎没有用

var str = $('.container table tbody tr td').html();
str.replace('•&nbsp;', '');
$('.container table tbody tr td').html(str);

Is there a pure CSS way to do it?

是否有纯CSS方式可以做到这一点?

3 个解决方案

#1

With CSS you can "hide" that text with font-size for example:

使用CSS,您可以使用font-size“隐藏”该文本,例如:

td {
  font-size: 0;
}
td a {
  font-size: 1rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>•&nbsp;<a href="">Link 1</a>
    </td>
    <td>•&nbsp;<a href="">Link 1</a>
    </td>
    <td>•&nbsp;<a href="">Link 1</a>
    </td>
  </tr>
</table>

Or with Jquery "remove" that text node using something like this:

或者使用Jquery使用以下内容“删除”该文本节点:

$('td').html(function(){
  return $(this).contents().slice(1);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>•&nbsp;<a href="">Link 1</a>
    </td>
    <td>•&nbsp;<a href="">Link 1</a>
    </td>
    <td>•&nbsp;<a href="">Link 1</a>
    </td>
  </tr>
</table>

#2

When there's a will, there's a way. Not sure why your jQuery didn't work, but here's a CSS-only solution. Note that you'll need the styles on both the td and the link. Hit "Run code snippet" to see it work.

当有遗嘱时,有办法。不确定为什么你的jQuery不起作用,但这里只是一个CSS解决方案。请注意,您需要td和链接上的样式。点击“运行代码段”查看是否有效。

table tr:first-child td:first-child {
  position: relative;
  text-indent: -9999px;
}

table tr:first-child td:first-child a {
  position: absolute;
  text-indent: 0;
  top: 0;
  left: 0;
}

<table border="1">
  <tr>
    <td>•&nbsp;<a href="#">Link</a></td>
    <td>Text here</td>
  </tr>
  <tr>
    <td>Text here</td>
    <td>Text here</td>
  </tr>
</table>

#3

// you may do something like this in pure css  


td {
    font-size: 0;
}
td a {
    font-size: 14px;
}

#1