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

Question

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

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

我尝试过使用JavaScript，但它似乎无法正常工作

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

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

Answer 1

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

或者使用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>

Answer 2

当有遗嘱时，有办法。不确定为什么你的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>

Answer 3

// you may do something like this in pure css  


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