jquery td.remove() works but td.empty() gives error

Question

The following jquery code works, but if I change td.remove() to td.empty() I get the error message: Uncaught TypeError: td.empty is not a function

I want to empty the contents of the td rather than remove the td so I can potentially put some different text in there later. How can I do that?

$('.msg-delete').click(function () {
    var id = this.getAttribute("data-id");
    var td = this.closest("td");
    if (id) {
        $.ajax({
            type: 'DELETE',
            url: '/messages/' + id,
            success: function () {
                td.remove();
            },
            error: function (error) {
                console.log(error);
            }
        });
    }
})

The table I am working on looks like this:

<table>
<tbody>
    <tr>
       <td>
            <button type="button" class="close msg-delete" data-id="5">&times;</button>
           <label>From:</label> Joe &nbsp;<label><br/>a test message
         </td>
     </tr>
  </tbody>
  </table>

Note: I also tried changing this.closest("td") to $(this)[0].closest("td") with the same result.

Answer 1

closest() and empty() are both jQuery methods so you need:

var td = $(this).closest("td") 

And

td.empty();