Clearing Cell Values Within HTML

Question

In my HTML code, I've got a certain cell whose value should be cleared if a link button is pressed. I'd like to achieve this using jQuery and here's how I tried to do it but with no results:

var $delActionDate = $('#delete_Event');

        $delActionDate.live('click', function() {

            var myRow = $delActionDate.parent().parent();
            myRow.find('#dateCell').html() = "";

Any ideas on how to do this?

Answer 1

You want, myRow.find('#dateCell').html("");

Answer 2

As Luca said, to update the html content you use html("") rather than html()="".

In additions, assuming your parent() stuff is correct based on your HTML, the change you need to make so that the selected row is based on which button is pressed should be: change

var myRow = $delActionDate.parent().parent();

to

var myRow = $(this).parent().parent();

Answer 3

You should use classes instead of IDs since there are multiple elements, then use .closest() and .find() to get where you want, like this:

$('.delete_Event').live('click', function() {
  $(this).closest('tr').find('.dateCell').empty();
});

This means changing your elements to class="delete_Eevent" and class="dateCell" instead of id="delete_Event" and id="dateCell". .closest('tr') to climb up to the <tr>, not matter how deep, then does a .find() to go down to the date cell. Then we're using .empty() to clear the elements.

If you have any data or event handlers this is a better approach than .html(""), because it won't leak the memory stored in $.cache, which .empty() cleans up.