How to hide text content within an element but not hide child elements?

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

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

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

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?

Solution

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

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:

$('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>