Jquery: Removing dynamically generated element when modal confirmation button is clicked
Question
For example:
<body>
<div class="container">
<!-- Generated by ajax -->
<div class="item" id="item_1">
<span class="remove-item"></span>
</div>
<div class="item" id="item_2">
<span class="remove-item"></span>
</div>
</div>
<div class="modal" id="removeItemModal">
<h3>Are you sure you want to remove?</h3>
<input type="hidden" id= "removeItemIdModalInput">
<button type="button">Cancel</button>
<button type="button" id="remove-confirm-btn">Confirm</button>
</div>
</body>
When clicked on the remove-item class a modal will be shown with two button Confirm and Cancel when user clicks on confirm, remove the whole (parent) item. How can i achieve this?? Here's what i did:
$(document).on("click",".remove-item", function (e) {
var removeProductId = $(this).closest(".item").attr("id");
// Setting the value in modal's hidden input
$("#removeItemIdModalInput").val(removeProductId);
$("removeItemModal").modal('toggle');
});
$(document).on("click","#remove-confirm-btn", function (e) {
var removeProductId = $("#removeItemIdModalInput").val();
$("removeItemModal").modal('toggle');
// Removing the container div/item
$(removeProductId).fadeOut(300,function () { $(this).remove();});
});
But It's not working. Why? Is there a better approach?
2 answers
solution1
0 2020-03-19 09:08:46
[EDIT]
TS wants a modal window, this answer provides an alternative
Instead of a modal window, you can use confirm() too.
If that is confirmed, you select the parent of the span, by using parent() , fade that element out, and remove. Just like you already had.
Also note that you use remove-item and remove_item both, I changed it all to remove_item
$(document).on("click", ".remove_item", function(e) { if(confirm("Do you want to remove this box")) { $(this).parent().fadeOut(300, function () { $(this).remove();}); } return; });
#item_1, #item_2 { border: 1px solid black; margin: 2em; } .remove_item { background: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <!-- Generated by ajax --> <div id="item_1"> Item 1 <span class="remove_item">remove</span> </div> <div id="item_2"> Item 2 <span class="remove_item">remove</span> </div> </div>
solution2
0 ACCPTED 2020-03-20 06:21:46
Here's what solved my problem:
$(document).on("click","#remove-confirm-btn", function (e) {
var removeProductId = $("#removeItemIdModalInput").val();
$("removeItemModal").modal('toggle');
// Changed here
$("body").find(removeProductId).fadeOut(300,function () { $(this).remove();});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.