Как добавить и удалить входное значение с помощью jquery?

Question

У меня есть вход и добавить кнопку.как только я нажимаю на кнопку добавления, входное значение должно сохранить строку таблицы, и мне нужна кнопка удаления здесь.Это значение мне нужно удалить индивидуально.Мне нужно сохранить много значений.Я пытался в jquery я получаю добавленную стоимость в таблице, но я не могу удалить значение.ниже мой код.Заранее спасибо.

<div class="col-sm-6 col-md-5">
              <div class="form-group">
                <label class="control-label" for="supplyingLocation">Supplying to Location <span class="text-danger">*</span></label>
                <div class="input-group">
                <input type="text" class="form-control" placeholder="Enter Supplying Location Name" name="supplyingLocation" id="supplyingLocation" required="required">
                <div class="input-group-btn">
                  <button class="btn btn-primary add-supplying-location-row" type="button">Add Location </button>
                </div>
              </div>
              </div>
            </div>
            <div class="clear"></div>
            <div class="col-sm-5">
                <div class="listing-table">
                <div class="table-responsive sup-loc-table">
                <table class="table table-bordered">
                  <thead>
                      <tr>
                        <th>Supplying to Location</th>
                        <th>Action</th>
                      </tr>
                  </thead>
                  <tbody></tbody>
                </table>
                </div>

          </div>
          </div>

 <script>
    $(document).ready(function(){
        $(".add-supplying-location-row").click(function(){
            var supname = $("#supplyingLocation").val();
            $('#supplyingLocation').val('');
            var supmarkup = "<tr><td>" + supname + "</td><td><input type='button' name='supplyingLocRecord' value='Delete' id='deletesupLoc'></td></tr>";
            $(".sup-loc-table table tbody").append(supmarkup);

        });

        // Find and remove selected table rows

        $("#deletesupLoc").click(function(){
            $(".sup-loc-table table tbody").find('input[name="supplyingLocRecord"]').each(function(){
                {
                    $(this).parents("tr").remove();
                }
            });
        });
    });    
</script>

Answer 1

Вы были довольно близки к ответу.Обратите внимание на следующие вещи:

1. Первый : вам абсолютно не нужно иметь дубликаты ID.Это может работать, но это семантически неверно, и вы не должны этого делать.Вы добавляете одну и ту же строку по щелчку, поэтому вы должны присвоить ей тот же класс

2. Второй : То же самое относится и к атрибуту имени.Если вы хотите захватить несколько данных одного типа, вы должны использовать supplyingLocRecord[].Он захватит все элементы в один массив.

   <input type='button' name='supplyingLocRecord[]' value='Delete' class='deletesupLoc'>

3. Третий : используемая привязка click() называется«прямая» привязка, которая прикрепит обработчик только к элементам, которые уже существуют.Он не будет привязан к элементам, созданным в будущем.Для этого вам необходимо создать «делегированную» привязку, используя on().

   $(document).on('click','.deletesupLoc',function(){ $(this).parents("tr").remove(); });

Answer 2

Это потому, что кнопка с идентификатором deletesupLoc не существует в DOM, когда вы вызываете .click().Поскольку он был добавлен динамически с использованием вашего скрипта, jQuery еще не знает о существовании этой кнопки.Поэтому вам нужно добавить вызов к $(document).on('click'), когда вы создаете кнопку для добавления прослушивателя событий во вновь созданный элемент.

Я немного изменил ваш код, чтобы идентификатор для каждой кнопки был уникальным (если только одно и то же имя не введено дважды - вы можете либо проверить это и убедиться, что это не может произойти, либо добавить количество вхождений +1 до конца идентификатора), который затем позволяет удалить соответствующую строку в таблице:

// Find and remove selected table rows
function deleteRow(buttonId) {
    $("#" + buttonId).each(function(){
        {
            $(this).parents("tr").remove();
        }
    });
};
	
$(document).ready(function(){
  $(".add-supplying-location-row").click(function(){
    var supname = $("#supplyingLocation").val();
    $('#supplyingLocation').val('');
    var buttonId = "deletesupLoc" + supname.replace(" ", "");
    var supDeleteButton = $("<input type='button' name='supplyingLocRecord' value='Delete' id='" + buttonId + "'>");
    $(document).on('click', '#' + buttonId, function() { deleteRow(buttonId); });
    var supRow = $("<tr>");
    supRow.append("<td>").append(supname);
    supRow.append("<td>").append(supDeleteButton);
    $(".sup-loc-table table tbody").append(supRow);
  });
});    

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="col-sm-6 col-md-5">
              <div class="form-group">
                <label class="control-label" for="supplyingLocation">Supplying to Location <span class="text-danger">*</span></label>
                <div class="input-group">
                <input type="text" class="form-control" placeholder="Enter Supplying Location Name" name="supplyingLocation" id="supplyingLocation" required="required">
                <div class="input-group-btn">
                  <button class="btn btn-primary add-supplying-location-row" type="button">Add Location </button>
                </div>
              </div>
              </div>
            </div>
            <div class="clear"></div>
            <div class="col-sm-5">
                <div class="listing-table">
                <div class="table-responsive sup-loc-table">
                <table class="table table-bordered">
                  <thead>
                      <tr>
                        <th>Supplying to Location</th>
                        <th>Action</th>
                      </tr>
                  </thead>
                  <tbody></tbody>
                </table>
                </div>

          </div>
          </div>