how to delete specific image using jquery in sortable jquery

Question

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

Please replace the PHP with rendered HTML and add images from for example picsum.photos Right now your example is not a minimal reproducible example — mplungjan
– mplungjan, Commented Jul 18, 2023 at 6:47

mplungjan · Accepted Answer · 2023-07-18 07:38:24Z

2

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>

edited Jul 18, 2023 at 7:38

answered Jul 18, 2023 at 6:54

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

TBC Over a year ago

is there any way i can give delete button to all images, so it will be easy to delete that speicif image?

TBC Over a year ago

but when i delete, the value in the hidden input is not changing

mplungjan Over a year ago

Fixed. See update

Collectives™ on Stack Overflow

how to delete specific image using jquery in sortable jquery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related