Empty all input fields in a tr in jQuery?

<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><inp开发者_JS百科ut 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?

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.

In your current html structure this should work inside a document ready:

$('tr td:first-child').bind('click', function () {
   $(this).parent().find('input').val('');
});

jsfiddle: http://jsfiddle.net/jeffreydev/5S3sv/

  $('td').click( function() {
      var $this = $(this);
      if ($this.text() == 'X')
      {
          $this.siblings().find('input').val('');
      }
    });

edit: updated after your comment. you can test it here edit 2: update after reading the description ^^

note: I don't know why "$this.siblings('input').val('');" doesn't work :/