jQuery 删除 dom 元素未按预期工作答案

【问题标题】：jQuery removing dom elements not working as expectedjQuery 删除 dom 元素未按预期工作
【发布时间】：2020-03-12 22:25:04
【问题描述】：

我给这个问题的标题是“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 中删除。大约一半是，一半不是。

非常感谢任何想法。

【问题讨论】：

标签： javascript jquery ajax dom

【解决方案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();
    }

您还可以通过在创建元素时为其指定唯一 ID 来直接定位元素：

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

然后按他们的 id 定位：

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

【讨论】：