jQuery hide only specific table row clicked onclick event

Question

I have written something like this to get the row that was clicked in jquery inside my table:

 $("#datatable-responsive").delegate("tr", "click", function (e) {
        console.log($(e.currentTarget).index() + 1);
    });

This works, but not the way I imagined it... The problem is that I have more than 1 action button inside my table and I need this event to be only triggered for specific type of button, not all tr's....

So the HTML markup looks like this:

<tr>
 <input type="text" class="titleInput" value="" />
<i class="fa fa-edit editTitle">
</tr>

So upon the row being clicked I'd like to hide the edit button:

$(".editTitle").hide();

And then show the textbox to make the title editable:

$(".titleInput").show();

How could I achieve this effect, can someone help me out?

Edit:

Guys so to summarize it what I'm actually trying to achieve here is:

- Upon click on the ".editTitle", Id' like to hide this element and then show the textbox which is shown above the <i> tag itself, but only for the clicked row ... 

Answer 1

Using below code, you can achieve the effect, you are expecting.

$(document).ready(function() {
      /* BELOW EVENT WILL BE TRIGGERED WHEN USER CLICK ON ANY ROW INSIDE TBODY TAG - STARTS */
      $("table tbody tr").click(function(){  
        /* HIDING OTHER EDIT TEXT BOX AND SHOWING OTHER EDIT TITLE - STARTS */
        $(".editTitle").show();
        $(".titleInput").hide();
        /* HIDING OTHER EDIT TEXT BOX AND SHOWING OTHER EDIT TITLE - ENDS */
        /* SHOWING CURRENT CLICKED ROW  - EDIT TEXT BOX - STARTS */
        $(this).find(".titleInput").show();
        /* SHOWING CURRENT CLICKED ROW  - EDIT TEXT BOX - STARTS */
        /* HIDING CURRENT CLICKED ROW  - EDIT TITLE - STARTS */
        $(this).find(".editTitle").hide();
        /* HIDING CURRENT CLICKED ROW  - EDIT TITLE - STARTS */
      });
      /* BELOW EVENT WILL BE TRIGGERED WHEN USER CLICK ON ANY ROW INSIDE TBODY TAG - ENDS */
    });


<table width="100%" cellpadding="10" cellspacing="10">
   <thead>
      <tr>
         <th width="200">Name</th>
         <th>Action</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>John</td>
         <td>
            <input type="text" class="titleInput" value="" />
            <span class="editTitle">Edit</span>
         </td>
      </tr>
      <tr>
         <td>MIc</td>
         <td>
            <input type="text" class="titleInput" value="" />
            <span class="editTitle">Edit</span>
         </td>
      </tr>
      <tr>
         <td>Kevin</td>
         <td>
            <input type="text" class="titleInput" value="" />
            <span class="editTitle">Edit</span>
         </td>
      </tr>
   </tbody>
</table>


<style>
.titleInput{display:none}
</style>