How to get Table td value on span click after that remove that row

Question

I have a table and there is span in the cell , when i click on span . it show closest TR, 2nd TD value and after that remove the row.

Demo

i try but not working...

<table id="Table_">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td><span class="abc">click me</span></td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td><span class="äbc">click me</span></td>
    </tr>
    <tr>
         <td>7</td>
        <td>8</td>
        <td>9</td>
        <td><span class="abc">click me</span></td>
    </tr>
    <tr>
        <td>10</td>
        <td>11</td>
        <td>12</td>
        <td><span class="abc">click me</span></td>
    </tr>
</table>

$('#Table_ .abc ').click(function() {
 alert($(this).closest("tr").children("td").eq(2).html());
    $(this).closest("tr").remove();
});

Answer 1

Something like this should work :)

 $('#Table_ .abc').click(function() { alert($(this).closest("tr").children("td").eq(1).html()); $(this).closest("tr").remove(); }); 

 table { border: 1px solid black; border-collapse: collapse } table tr td { border: 1px solid black; padding: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <table id="Table_"> <tr> <td>1</td> <td>2</td> <td>3</td> <td><span class="abc">click me</span> </td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> <td><span class="abc">click me</span> </td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> <td><span class="abc">click me</span> </td> </tr> <tr> <td>10</td> <td>11</td> <td>12</td> <td><span class="abc">click me</span> </td> </tr> </table> 

Answer 2

The issue is in your HTML, the a char is written in a weird way. it should be a insted of ä.

Updated jQuery code:

$('.abc').click(function() {
 alert($(this).closest("tr").children("td").eq(2).html());
    $(this).closest("tr").remove();
});

Please check this fiddle

Answer 3

Note the two dots over the ä . The code is correct when you replace a with ä.

$('#Table_ span.äbc ').click(function() {
   alert($(this).closest("tr").children("td").eq(2).html());
   $(this).closest("tr").remove();
});