In my HTML I have a set of inputs which id
follows the form entry-<count>
. Posts have a delete button of their own ( Delete ), this displays a Bootstrap 4 modal window; this window has a confirmation of the deletion of the entry ( Yes ) and a cancel button. This modal window is used to confirm the removal of all entries, one at a time, which I achieve by using the data-entry-number
button pressed attribute, which is also used to control the value of the modal's Yesdata-target
button .
In general, updating the attributes and the modal, depending on the input in question, works correctly (see JavaScript instructions for #delete-modal
); however, the statements that remove the entry and update the parameters work only once (the first time an entry is cleared).
From the browser you can see how the text of span
#entry-number
and the Yesdata-target
button ( ) are updated correctly, which in theory would allow a correct deletion of any entry depending on the Delete button pressed, but from the Javascript console, once the first input, when printing the value of the variable , the value corresponding to the first eliminated input is obtained, so that no elimination occurs for the subsequent ones. Here I leave the codes that exemplify this operation.#delete-confirm
entry_target
What is happening? I am not an expert in Javascript and seeing that the DOM is changing, and that it seems that the instructions do not see these changes, makes me very confused. :) I'd love to see an answer that not only helps me with the solution, but also explains the basics I'm missing (hopefully not too many).
$('#delete-modal').on('show.bs.modal', function (e) {
var $button = $(e.relatedTarget);
var entry_number = $button.data('entry-number');
$(this).find('#entry-num').text(entry_number);
$(this).find('#delete-confirm').attr('data-target', '#entry-' + entry_number);
}).on('hide.bs.modal', function () {
$(this).find('#entry-num').text('');
$(this).find('#delete-confirm').attr('data-target', '');
});
$('#delete-confirm').on('click', function () {
var entry_target = $(this).data('target');
var $target = $(entry_target);
$target.remove();
$('#delete-modal').modal('hide');
});
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Test</title>
</head>
<body>
<h1>Test Buttons</h1>
<div id="entry-1">
<h3>Entry 1</h3>
<p>Text of entry 1</p>
<button data-entry-number="1" class="btn btn-outline-danger " type="button" aria-label="Delete" data-toggle="modal" data-target="#delete-modal" title="Delete">
Delete
</button>
</div>
<hr>
<div id="entry-2">
<h3>Entry 2</h3>
<p>Text of entry 2</p>
<button data-entry-number="2" class="btn btn-outline-danger " type="button" aria-label="Delete" data-toggle="modal" data-target="#delete-modal" title="Delete">
Delete
</button>
</div>
<div class="modal fade" id="delete-modal" tabindex="-1" role="dialog" aria-labelledby="modalTitle"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle">Delete entry?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are your sure you want to delete the entry number <span id="entry-num"></span>?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button id="delete-confirm" data-target="" type="button" class="btn btn-danger">Yes</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>