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

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>