如何在可排序的jQuery中使用jQuery删除特定图像-解网

问：

我在html中有一个图像部分，其中图像显示为网格，用户可以拖动和重新排列，根据重新排列，图像名称存储在隐藏的输入框中，这工作正常，我的代码如下：

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

我想从这个网格中删除一些特定的图像，请告诉我我是如何做到这一点的，提前致谢

javascript html 图像 jquery-ui-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>

如何在可排序的jQuery中使用jQuery删除特定图像

how to delete specific image using jquery in sortable jquery

评论

评论