javascript html jquery image jquery-ui-sortable

how to delete specific image using jquery in sortable jquery

I have an image section in html, where images are shown as grid and user can drag and rearrange, according to the rerrangement the image names are stored in the hidden input box, this is working fine, my code is like below:

$(function () {
  $("#imageListId").sortable({
    update: function (event, ui) {
      getIdsOfImages();
    }, //end update
  });
});

function getIdsOfImages() {
  var values = [];
  $(".listitemClass").each(function (index) {
    values.push($(this).attr("id").replace("im", ""));
  });
  $("#outputvalues").val(values);
}

/* image dimension */
  
  .listitemClass img {
    height: 200px;
    width: 100%;
  }
  /* imagelistId styling */
  
  #imageListId {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  
  #imageListId div {
    margin: 0 4px 4px 4px;
    padding: 0.4em;
    display: inline-block;
  }
  /* Output order styling */
  
  #outputvalues {
    margin: 0 2px 2px 2px;
    padding: 0.4em;
    padding-left: 1.5em;
    width: 250px;
    border: 2px solid dark-green;
    background: gray;
  }
  
  .listitemClass {
    border: 1px solid #006400;
    width: 25%;
  }
  
  .height {
    height: 10px;
  }

<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<b>Drag and drop images to arrange</b>
<div class="height"></div><br>
<div id="imageListId" style="display:flex">
  <div id="im1" class="listitemClass">
    <img src="https://picsum.photos/id/237/200/300" alt="">
  </div>
  <div id="im2" class="listitemClass">
    <img src="https://picsum.photos/id/230/200/300" alt="">
  </div>
  <div id="im3" class="listitemClass">
    <img src="https://picsum.photos/id/235/200/300" alt="">
  </div>
  <div id="im4" class="listitemClass">
    <img src="https://picsum.photos/id/233/200/300" alt="">
  </div>
</div>
<form action="" method="post" enctype="multipart/form-data" style="margin-top:3%">
  <div id="outputDiv">
    <input id="outputvalues" type="hidden" value="" name="nname" />
    <input type="hidden" value="<?=$nname1?>" name="nname1" />
  </div>
  <button type="submit" name="editcategory" class="btn btn-primary">SAVE</button>
</form>

i want to delete some specific image from this grid, please tell me how do i accomplish this, thanks in advance

Solution

You need to reset the sortable:

$(function() {
  const getIdsOfImages = () => {
    const values = $('.listitemClass').map(function() {
      return this.id.replace('im', '')
    }).get();
    $('#outputvalues').val(values);
  };
  const init = () => {
    $('#imageListId').sortable({
      update: getIdsOfImages
    });
    getIdsOfImages();
  }
  $('.delete').on('click', function() {
    $(this).closest('.listitemClass').remove();
    init();
  })
  init();
});

/* image dimension */

.listitemClass img {
  height: 200px;
  width: 100%;
}


/* imagelistId styling */

#imageListId {
  margin: 0;
  padding: 0;
  display:flex;
}

#imageListId div {
  margin: 0 4px 4px 4px;
  padding: 0.4em;
  display: inline-block;
}


/* Output order styling */

#outputvalues {
  margin: 0 2px 2px 2px;
  padding: 0.4em;
  padding-left: 1.5em;
  width: 250px;
  border: 2px solid dark-green;
  background: gray;
}

.listitemClass {
  border: 1px solid #006400;
  width: 25%;
}

.height {
  height: 10px;
}

<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<b>Drag and drop images to arrange</b>
<div class="height"></div><br>
<div id="imageListId">
  <div id="im1" class="listitemClass">
    <img src="https://picsum.photos/id/236/200/300" alt="Image 1">
    <button type="button" class="btn btn-primary delete">X</button>
  </div>
  <div id="im2" class="listitemClass">
    <img src="https://picsum.photos/id/237/200/300" alt="Image 2">
    <button type="button" class="btn btn-primary delete">X</button>
  </div>
  <div id="im3" class="listitemClass">
    <img src="https://picsum.photos/id/238/200/300" alt="Image 3">
    <button type="button" class="btn btn-primary delete">X</button>
  </div>
</div>
<form action="" method="post" enctype="multipart/form-data" style="margin-top:3%">
  <div id="outputDiv">
    <input id="outputvalues" type="text" value="" name="nname" />
    <input type="hidden" value="1" name="nname1" />
  </div>
</form>