Извлечение строки таблицы данных с помощью кнопки на этой строке с JQuery каждого()

Question

TLDR

Я хочу, чтобы мой сценарий ниже, чтобы вернуть <input id и value из строки таблицы, что кнопка нажата находится. Прямо сейчас она всегда возвращает данные из первой строки только, независимо от того, какая строка кнопка была.

---

Я думаю, что я ищу сделать, это просто, и я думаю, что я довольно близко. Но для меня это всего лишь процесс обучения, поэтому возможно возможно Вероятно, что я делаю ошибку начинающего.

Я строю корзину покупок. У меня есть строки таблицы, которые встроены в цикл foreach. Основной смысл такой (с использованием лезвия):

<?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 

Все строки, созданные в этом цикле, находятся в форме. У меня уже есть кнопка отправки для этой формы (вне цикла), чтобы обновить количество.

То, что я хочу сделать в конце, имеет кнопку «удалить» строки таблицы, чтобы установить поле количества конкретной строки в ноль и отправить форму (посредством существующей кнопки отправки формы) удаляя "предмет из тележки. Это уже можно сделать вручную, установив поле количества в ноль, я просто думаю, что также должна быть кнопка удаления, как и ожидали бы многие люди.

Что я ищу, чтобы сделать в качестве первого шага является возвращение <input id и value из строки таблицы, что кнопка нажата находится в

Мой сценарий выглядит следующим образом:.

$(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(); 
     }); 
    }); 
}); 

Это работает .... Независимо от того, какая кнопка удаления строки нажата, консоль отображает информацию с первого .row-item.

4 2e9f9685813dee35a13376eccb21431b

Это здорово. Это в основном то, что мне нужно. Я могу разобраться с информацией позже, мне нужно только получить соответствующую информацию сначала :)

Но если я нажму кнопку «Удалить» в другой строке, я получу то же самое. Очевидно, что моя итерация работает не так, как хотелось бы.

Fiddle here

_{Я должен был жесткий код некоторых переменных в скрипку}

---

EDIT

Хорошо, this answer работы в том, что я могу получить все различные данные в консоли. Это прогресс! Но я еще не уверен, как использовать это с помощью кнопок «удалить» ...

Answer 1

Вы можете сделать это легко, используя jQuery, чтобы пересечь DOM вместо итерации и поискать материал таким образом.

Вот некоторые рабочий код и 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 
    }); 
}); 

Этот код использует делегирование событий, поэтому он добавляет только один слушатель событий для обработки все из кнопок Delete.

Я сделал несколько изменений в ваш HTML, чтобы пойти с этим кодом:

• Добавлена ​​id="product-table" к основному <table>.
• Добавлен class="total" каждому из "итоговых" <strong> элементов.