How To add and delete input value using jquery?

Question

I have input and add a button. once I click on the add button the input value should save table row and I need a delete button here. That value I need to delete individual. I need to save many values. I tried in jquery I get the added value in the table but I'm unable to delete the value. below is my code. Thanks in Advance.

<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

It's because the button with ID deletesupLoc doesn't exist in the DOM when you call .click() on it. Because it was added dynamically using your script, jQuery doesn't know of this button's existence yet. So you need to add a call to $(document).on('click') when you create the button to add an event listener to the newly created element.

I changed your code slightly so that the ID for each button is unique (unless the same name is entered twice - you could either test for that and make sure that can't happen or add the number of occurrences + 1 to the end of the ID) which then allows you to delete the relevant row in the table:

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

Answer 2

You were pretty close to the answer. Please note below things:

1. First: You absolutely should not have duplicate IDs. It may work, but it is semantically incorrect and you should not do it. You are adding same row onclick, so you should give it same class

2. Second: Same goes for name attribute. If you want to capture multiple data of same type you should use supplyingLocRecord[]. It will capture all elements into single array.

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

3. Third: The click() binding you're using is called a "direct" binding which will only attach the handler to elements that already exist. It won't get bound to elements created in the future. To do that, you'll have to create a "delegated" binding by using on().

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