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

Question

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('• ', '');
$('.container table tbody tr td').html(str);

Is there a pure CSS way to do it?

Answer 1

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>

Answer 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.

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>