Reference $(this).parent.parent.children('td').attr('key')

Question

<script>
    $('#RemoveColumn').click(function(){
        R_C($(this));
    });
    R_C = function(e){
        for(var i = 0; i <= $(e).parent().parent().child('td').length - 1; i++){
            if($(e).parent().parent().child('td:eq(i)').attr(id) != undefined){
                K_ID = $(e).parent().parent().child('td:eq(i)').attr(id);
                $('#' + K_ID).parent.remove();
            }
        }
    }
</script>
<table>
    <tr>
        <td id='key'>1</td>
        <td>TIM</td>
        <td>Smith</td>
        <td><button id='RemoveColumn'>Remove</button></td>
    </tr>
    <tr>
        <td id='key'>2</td>
        <td>James</td>
        <td>Smith</td>
        <td><button id='RemoveColumn'>Remove</button></td>
    </tr>
    <tr>
        <td id='key'>3</td>
        <td>Scott</td>
        <td>Smith</td>
        <td><button id='RemoveColumn'>Remove</button></td>
    </tr>
</table>

In this example I have a table set up, each row has a few TD tags and the last TD in each row has a "Remove" button. When clicked I need it to look at the parent TR and get the amount of TDs so I can set up the for loop. Then during that for loop check all the TD tags for the one that has the Key ID.

I can then take this and plug it into my end goal of having an SQL statement that will delete that record from a database table. Hence why I need the Key ID from the row a remove button is clicked in.

I dont know how to referance the parent TR's TD children when passing jquery a object in the $(e) format.

Any one have any ideas?

UPDATE - Issue Complete

Thank you everyone I was able to get this done today. I ended up with something like this.

<script>
    T_R_R = function(e){
        var T_R_R_T_N = $('#T_S').val();
        var T_R_R_K_N = $('#S_T_R #T_H').closest('tr').find('td[id]').html();
        var T_R_R_K_V = $(e).closest('tr').find('td[id]').html();
        var N_T = T_R_R_T_N + " WHERE " + T_R_R_K_N + " = '"+ T_R_R_K_V + "'";
        $.get('/DataBase/Remove_Record/' + N_T, function(res) {
            if (res.status) {
                console.log('Record Removed');
                Get_Table_Headers($('#T_S'));
            } else {

            };
        });
    };
</script>

This will be used to send a mysql command to DELETE FROM [TableName] WHERE [Key_Name] = '[Key_Value]'

Multiple `id='RemoveColumn'` and `id='key'`... Check [here](https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page) — Louys Patrice Bessette, Aug 15 '17 at 21:31

score 1 · Answer 1 · answered Aug 15 '17 at 21:40

You should put the ID as a property in the button.

<table>
    <tr>
        <td class='key'>1</td>
        <td>TIM</td>
        <td>Smith</td>
        <td><button id="1" class='RemoveColumn'>Remove</button></td>
    </tr>
</table>

On click us esomething like this:

$("button").click(function() {
  var id = $(this).prop('id');
  // Here you send a HTTP POST request with the ID to the backend.
  // On successfull delete, just remove the row like this:
  $(this).closest ('tr').remove ();
});

You can also you the data- attribute

<td><button data-id="1" class='RemoveColumn'>Remove</button></td>

And fetch the id using this query

var id = $(this).data('id');

Louys Patrice Bessette · Answer 2 · 2017-08-15T21:58:24.477

First, use classes instead of ids.

Then, if you only want to remove the row on button click, your script can be reduced like this:

$('.RemoveColumn').click(function(){
  var rowNumber = $(this).parents("tr").find("td").first().html();
  console.log( "Row # "+rowNumber+" deleted." ); // The row number
  $(this).parents("tr").remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
    <tr>
        <td>1</td>
        <td>TIM</td>
        <td>Smith</td>
        <td><button class='RemoveColumn'>Remove</button></td>
    </tr>
    <tr>
        <td>2</td>
        <td>James</td>
        <td>Smith</td>
        <td><button class='RemoveColumn'>Remove</button></td>
    </tr>
    <tr>
        <td>3</td>
        <td>Scott</td>
        <td>Smith</td>
        <td><button class='RemoveColumn'>Remove</button></td>
    </tr>
</table>

I think OP wants to retrieve the row ID as well, so they can send a delete command to the database — ADyson, Aug 15 '17 at 21:48

score 0 · Accepted Answer · answered Aug 15 '17 at 21:47

Note that your duplicate element IDs are invalid HTML, and your code will never work while you have them, since the jQuery selector can only ever identify the first of the duplicated elements. Better to do this using classes. In the snippet below I've changed the "id" of the tds that have it to be the actual ID (same as the content), then they're unique and it's easier to retrieve the ID. I've used an alert just to demonstrate the ID retrieved.

$(function() {
  $('.RemoveColumn').click(function() {
    R_C($(this));
  });
  R_C = function(e) {
    var tr = e.closest("tr");
    alert(tr.find('td[id]').attr("id")); //the "find" gets any <td>s which have an ID property, regardless of its value. So as long as there's only one <td> with an ID within the <tr>, this will work
    tr.remove();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td id='1'>1</td>
    <td>TIM</td>
    <td>Smith</td>
    <td><button class='RemoveColumn'>Remove</button></td>
  </tr>
  <tr>
    <td id='2'>2</td>
    <td>James</td>
    <td>Smith</td>
    <td><button class='RemoveColumn'>Remove</button></td>
  </tr>
  <tr>
    <td id='3'>3</td>
    <td>Scott</td>
    <td>Smith</td>
    <td><button class='RemoveColumn'>Remove</button></td>
  </tr>
</table>

N.B. You could make the code even simpler by having the ID as a data-attribute of the button itself:

<button class='RemoveColumn' data-id="1">Remove</button>

and then you could remove

alert(tr.find('td[id]').attr("id"));

and replace it with simply

alert(e.data("id"));

Reference $(this).parent.parent.children('td').attr('key')

3 Answers3