Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 67441

Delete rows using modal confirmation

$
0
0

I have created a simple data table which include the following actions (Edit,Delete).

I have added to the delete button a confirmation deletion in a modal.

The problem is when the user click on "Yes" which means delete, the row keeps showing and did not removed. Here is the HTML code of the modal:

<div id="myModal" class="modal fade">
  <div class="modal-dialog modal-confirm">
    <div class="modal-content">
      <div class="modal-header">
        <div class="icon-box">
          <i class="material-icons">&#xE5CD;</i>
        </div>
        <h4 class="modal-title">Are you sure?</h4>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      </div>
      <div class="modal-body">
        <p>Do you really want to delete these records? This process cannot be undone.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-danger" id="btnDelteYes">Delete</button>
      </div>
    </div>
  </div>
</div>

Here is the jQuery code of Delete button:

$(document).ready(function() {
  $("form").submit(function(e) {
    e.preventDefault();
    var name = $("input[name='name']").val();
    var email = $("input[name='email']").val();

    $(".data-table tbody").append("<tr data-name='" + name + "' data-email='" + email + "'><td>" + name + "</td><td>" + email + "</td><td><button id='test5' class='btn btn-info btn-xs btn-edit'>Edit</button><button class='btn btn-danger btn-xs btnDelete' id='test6'>Delete</button></td></tr>");

    $("input[name='name']").val('');
    $("input[name='email']").val('');
  });
  $("body").on('click', '.btn.btnDelete', function() {
    var id = $(this).closest('tr').data('id');
    $('#myModal').data('id', id).modal('show');
  });


  $("body").on("click", function() {
    $("#btnDelteYes").parents("tr").remove();
    $('#myModal').modal('hide');
  });
});       

I need a help to deal with this issue and to know what i am doing wrong. Any help would be appreciated.

Thank you!


Viewing all articles
Browse latest Browse all 67441

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>