Extract table row data with button on that row with jQuery each()

Question

TLDR

I want my script below to return the <input id and value of the table row that the button clicked is in. Right now it always returns the info from the first row only, regardless of which row the button was in.

---

I think what I'm looking to do is simple, and I think I'm pretty close. But this is all a learning process for me so it's possible probable that I'm making a beginner mistake.

I'm building a shopping cart. I have table rows that are built in a foreach loop. The basic gist is such (using blade):

<?php $i = 0; ?>
@foreach($cart as $c)
    <tr class="row-item">
        <td>{{ $c['name'] }}</td>
        <td>{{ $c['price'] }}</td>
        <td><input type="text" class="quantity" id="{{ $c['rowid'] }}" value="{{ $c['qty'] }}"></td>
        <td><button class="btn-remove" id="remove{{ $i }}" name="removeItem"></button></td>
    </tr>
    <?php $i++ ?>
@endforeach

All of the rows created in this loop are within a form. I already have a submit button for this form (outside the loop) to update the quantities.

What I'm looking to do in the end is have the table row's 'remove' button set that particular row's quantity field to zero and submit the form (by way of the existing form submit button), thereby 'removing' the item from the cart. This can already be done manually, by setting the quantity field to zero, I just think there ought to be a remove button also, as most people would expect that.

What I'm looking to do as a first step is to return the <input id and value of the table row that the button clicked is in.

My script is as follows:

$(document).ready(function() {

    $(".row-item").each(function(i) {

        var fieldValue = $(".quantity").val();
        var fieldId = $(".quantity").attr('id');

        $("#remove" + i).click(function(e) {

            console.log(fieldValue, fieldId);

            e.preventDefault();
        });
    });
});

This works... kind of. Regardless of which row's remove button I click, the console displays the info from the first .row-item.

4 2e9f9685813dee35a13376eccb21431b

That's great. That's basically what I'm after. I can deal with the info later, I just need to get the appropriate info first :)

But if I click the remove button on another row, I get the exact same thing. Clearly my iteration is not working as I'd like.

Fiddle here

_{I had to hard code some of the variables in the fiddle}

---

EDIT

Okay, this answer works in that I can get all the various data into the console. That's progress! But I'm not yet sure how to use that with my 'remove' buttons...

Answer 1

You can do this easily by using jQuery to traverse the DOM instead of iterating and looking for stuff that way.

Here's some working code and an updated fiddle:

$(document).ready(function () {

    $('#product-table').on( 'click', '.btn-remove', function( event ) {
        var $tr = $(this).closest('tr');
        $tr.find('.quantity').val( '0' );
        $tr.find('.total').text( '0.00' );
        // Submit your form here
    });
});

This code uses event delegation, so it adds only a single event listener to handle all of the Delete buttons.

I made a couple of changes to your HTML to go with this code:

• Added id="product-table" to the main <table>.
• Added class="total" to each of the "total" <strong> elements.