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>

Plz add the necessary html in your code. The elements '.add-supplying-location-row' are,'#supplyingLocation','#deletesupLoc','.sup-loc-table',etc are missing. — shreyas d
– shreyas d, Commented Sep 25, 2019 at 10:21
Hey Shreyas. Thanks for your reply. Now I edited my code. Can you please check. And added image also. Thanks again. — Meggi
– Meggi, Commented Sep 25, 2019 at 10:30

shreyas d · Accepted Answer · 2019-09-25 11:06:18Z

3

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

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

answered Sep 25, 2019 at 11:06

shreyas d

7741 gold badge4 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Meggi Over a year ago

ohh. I did it now. Thanks

Dana C · Accepted Answer · 2019-09-25 11:15:06Z

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>

Collectives™ on Stack Overflow

How To add and delete input value using jquery?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related