Confirmation box before deleting item in our Codeigniter 3. now what I will do, when the user will click on the delete link we want to pop up messages or jquery confirm box with a message like "Are you sure want to remove this item ?" If the user click Yes proceed to delete if click No nothing to do that's it.



Follow some steps:


Step 1: 

Create items database table

CREATE TABLE IF NOT EXISTS `items` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `description` text COLLATE utf8_unicode_ci NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=16 ;

Then insert some dummy data to delete.


Step 2: 

Add Routes application/config/routes.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

$route['item-list'] = 'ItemController/index';
$route['item-list/(:any)']['delete'] = "ItemController/delete/$1";


Step 3: 

Create ItemController Controller application/controllers/ItemController.php

<?php


defined('BASEPATH') OR exit('No direct script access allowed');


class ItemController extends CI_Controller {


   /**
    * Get All Data from this method.
    *
    * @return Response
   */
   public function __construct() {
      parent::__construct();
      $this->load->database();
   }


   /**
    * Create from display on this method.
    *
    * @return Response
   */
   public function index()
   {
      $data['data'] = $this->db->get("items")->result();
      $this->load->view('itemlist', $data);
   }


   /**
    * Delete Data from this method.
    *
    * @return Response
   */
   public function delete($id)
   {
       $this->db->delete('items', array('id' => $id));
       echo 'Deleted successfully.';
   }
}


Step 4: 

Create View application/views/itemlist.php

<!DOCTYPE html>
<html>
<head>
    <title>codeigniter confirm before delete</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
    <div class="col-lg-12 margin-tb">
        <div class="pull-left">
            <h2>codeigniter confirm before delete example</h2>
        </div>
    </div>
</div>


<table class="table table-bordered">
  <thead>
      <tr>
          <th>Title</th>
          <th>Description</th>
          <th width="220px">Action</th>
      </tr>
  </thead>
  <tbody>
   <?php foreach ($data as $item) { ?>      
      <tr id="<?php echo $item->id; ?>">
          <td><?php echo $item->title; ?></td>
          <td><?php echo $item->description; ?></td>          
      <td>
          <button type="submit" class="btn btn-danger remove"> Delete</button>
      </td>     
      </tr>
   <?php } ?>
  </tbody>
</table>
</div>


<script type="text/javascript">
    $(".remove").click(function(){
        var id = $(this).parents("tr").attr("id");


        if(confirm('Are you sure to remove this record ?'))
        {
            $.ajax({
               url: '/item-list/'+id,
               type: 'DELETE',
               error: function() {
                  alert('Something is wrong');
               },
               success: function(data) {
                    $("#"+id).remove();
                    alert("Record removed successfully");  
               }
            });
        }
    });


</script>

</body>
</html>


Finally, You have to run your application

http://localhost/ci_project/item-list



Thanks..........