Question

<tr>
<td>X</td>
<td><input type="text" value="blabla"></td>
<td><input type="text" value="blabla"></td>
<td><input type="text" value="blabla"></td>
<td><input type="text" value="blabla"></td>
</tr>
<tr>
<td>X</td>
<td><input type="text" value="again"></td>
<td><input type="text" value="again"></td>
<td><input type="text" value="again"></td>
<td><input type="text" value="again"></td>
</tr>

How can i in jQuery, click the X and it will empty the input fields that are inside the tr?

Answer 1

Change the cell with X to this:

<td><a href="#" class="click-here">X</a></td>

Then put this inside script tags in the page:

jQuery(document).ready(function() {
  jQuery('.click-here').click(function() {
    jQuery(this).parents('tr').find('input').val('');
  });
});

UPDATE

Made the jQuery based on class name rather than ID so it’s more re-usable.