jQuery删除dom元素无法正常工作

Question

我给这个问题的标题是'jQuery删除DOM元素无法正常工作'。但是我不确定删除功能是否是真正的问题。老实说，我绝对不知道在哪里寻找解决方案。

我想上传DOM中存在的一组图像。上载图片后，我想从DOM中删除该图片的父级，以使父级和图片以及其不再可见。图像及其父级已动态添加到DOM。

当我单击按钮时，此JavaScript称为：

$('#StartUpload').on('click', function () {
  if (inputIsComplete()) {
    const imgs = document.querySelectorAll('.pic')

    for (let i = 0; i < imgs.length; i++) {
      const img = imgs[i].getAttribute('src')

      uploadImage(imgs[i], img, i + 1)
    }
  }
})

[此uploadImage功能：

function uploadImage (img, file, order) {
  const d = new Date()
  const data = {
    file: file,
    traject: $('select').eq(2).val(),
    filename: d.getTime().toString(),
    order: order,
  }

  $.ajax({
    method: 'POST',
    url: 'save-pictures.php',
    data: data,
    success: function () {
      console.log(`${data.order} - ${data.filename} uploaded succesfully.`)

      $('.img-canvas').eq(data.order - 1).remove()
    },
    error: function (err) {
      console.log(err)
    },
  })
}

问题出在AJAX调用的成功方法中。所有图像都记录到控制台。所有图像都有效地上传到服务器，并且对于所有图像，在数据库中创建了一条记录。但是，并非所有图像都已从DOM中删除。大约有一半是，有一半不是。

任何想法都将受到赞赏。

Answer 1

您正在删除将影响其他元素顺序的元素。在下一次调用eq()时，它将定位到错误的元素。

例如

<input id="0"> <!-- index 0 -->
<input id="1"> <!-- index 1 -->
<input id="2"> <!-- index 2 -->
<input id="3"> <!-- index 3 -->

现在，如果删除索引1处的元素，则最后两个元素的顺序将更改。不再使用索引2和3来定位元素2和3，而是分别使用1和2来定位元素：

<input id="0"> <!-- index 0 -->
<input id="2"> <!-- index 1 -->
<input id="3"> <!-- index 2 -->

您的代码不考虑两次通话之间的更改。

您可以简单地事先确定该元素，然后在删除之前将其传递给函数，使其具有对该元素的引用：

for (let i = 0; i < imgs.length; i++) {
  const img = imgs[i].getAttribute('src')
  let imgCanvas = $('.img-canvas').eq(i);
  uploadImage(imgs[i], img, i + 1, imgCanvas)
}

/*...*/

function uploadImage (img, file, order, imgCanvas) {
  /*...*/
    success:function(){
      imgCanvas.remove();
    }

您还可以通过在创建元素时为其赋予唯一标识来直接定位元素：

<input id="pic0"> 
<input id="pic1"> 
<input id="pic2"> 
<input id="pic3"> 

然后按其ID定位：

success:function(){
  $("#pic"+(order-1)).remove();
}