เว็บบอร์ด PHP เว็บส่งเสริมการเรียนรู้ Hosting CRM ERP Server Programming ถาม-ตอบปัญหา

    <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>

[url=https://www.mindphp.com/vdo-tutorial-php7/4011-php-class-properties-method-method.html]method[/url] confirm() เป็น method ของ [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/3863-what-is-jquery.html]Jquery[/url] เพื่อแจ้งเตือนว่า คุณยืนยันจะทำเหตุการณ์นั้นๆ จริงไช่ไหม และสามารถใช้ [url=https://www.mindphp.com/forums/viewtopic.php?f=78&t=40777]jConfirmAction[/url] ที่เป็นส่วนของ javascript ก็สามารถทำงานได้เช่นกัน

ตัวอย่างการใช้งาน
[code=php]
    <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>

 [/code]

[code]
<script type="text/javascript">
$('.list-group-item .btn').click(function(){
if (confirm('แน่ใจ? ')) {
$(this).parent().remove();
$('.badge-pill').html($('.lh-condensed').length);
}
});
</script>
[/code]

จะได้
[img]http://snap.mindphp.com/index.php?view=2019Nov12_5dca9d563e0e8[/img]

เมื่อกด ปุ่ม delete จะแจ้งเตือนเพื่อยืนยันว่า จะทำการลบหรือไม่ ?
[img]http://snap.mindphp.com/index.php?view=2019Nov12_5dca9d9401cab[/img]

อ้างอิง
https://www.w3schools.com/jsref/met_win_confirm.asp
https://craftpip.github.io/jquery-confirm/