Having trouble displaying a text message in the Bootstrap modal body when there is no data available in the model. I have multiple cards in the model, and if I click on the skip or done buttons, each card will close. However, if there is only one card in the model, it should close automatically when the skip or done button is clicked. I'm struggling to show the text in the model body.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.modal-body{
height: 70vh;
overflow-y: auto;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="card removeit mb-2">
<div class="card-header"><span>Title</span></div>
<div class="card-body">
<p>Card body 1</p>
</div>
<div class="card-footer">
<button class="btn btn-primary float-right clscurrent ml-2 ">Done</button>
<button class="btn btn-danger float-right clscurrent">Skip</button>
</div>
</div>
... Additional card elements ...
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.clscurrent').on('click', function() {
$(this).closest('.removeit').remove();
if($("#myModal").find('div.card').length == 0)
{
$("#myModal").modal('hide');
}
else {
var noData = "You don't have any task";
$(".card-body").append(noData);
}
});
});
</script>
</body>
</html>