ตัวอย่างการใช้งาน
โค้ด: เลือกทั้งหมด
<ul class="list-group mb-3">
<li class="list-group-item d-flex justify-content-between lh-condensed">
<button type="button" class="btn btn-danger" name="button">delete</button>
<div>
<h6 class="my-0">Product name</h6>
<small class="text-muted">Brief description</small>
</div>
<span class="text-muted">$12</span>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<button type="button" class="btn btn-danger" name="button">delete</button>
<div>
<h6 class="my-0">Second product</h6>
<small class="text-muted">Brief description</small>
</div>
<span class="text-muted">$8</span>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<button type="button" class="btn btn-danger" name="button">delete</button>
<div>
<h6 class="my-0">Third item</h6>
<small class="text-muted">Brief description</small>
</div>
<span class="text-muted">$5</span>
</li>
<li class="list-group-item d-flex justify-content-between bg-light">
<button type="button" class="btn btn-danger" name="button">delete</button>
<div class="text-success">
<h6 class="my-0">Promo code</h6>
<small>EXAMPLECODE</small>
</div>
<span class="text-success">-$5</span>
</li>
<li class="list-group-item d-flex justify-content-between">
<span>Total (USD)</span>
<strong>$20</strong>
</li>
</ul>
โค้ด: เลือกทั้งหมด
<script type="text/javascript">
$('.list-group-item .btn').click(function(){
if (confirm('แน่ใจ? ')) {
$(this).parent().remove();
$('.badge-pill').html($('.lh-condensed').length);
}
});
</script>
เมื่อกด ปุ่ม delete จะแจ้งเตือนเพื่อยืนยันว่า จะทำการลบหรือไม่ ?
อ้างอิง
https://www.w3schools.com/jsref/met_win_confirm.asp
https://craftpip.github.io/jquery-confirm/