javascript - 删除另一个节点时删除元素的属性

Question

背景：我正在使用一个 eforms 平台，该平台包含一个生成 base64 并将其存储在 DOM 中的上传器。上传器不允许轻松查看上传的图像，因此我正在研究通过上传字段中的 data-uris 进行迭代并将这些填充到下面的图像库中。

<!-- this block is stripped down version of the DOM created by the uploader -->
<div class="upload_field">
    <div>
        <li data-name="animal.jpg">
            <button data-name="animal.jpg" data-uri="data:image/jpeg;base64,/9j/4AAQSkZJ..">animal.jpg</button>
        </li>
        <li data-name="gonzo.jpg">
            <button data-name="gonzo.jpg" data-uri="data:image/jpeg;base64,/9j/4AAQSkZJ...">gonzo.jpg</button>
        </li>
    </div>
</div>

<!-- gallery code from here -->
<script>
  setInterval(function () {
    $.each($('.upload_field').find('li'), function (index) {
      const uploadBase64 = $(this).find('button').attr('data-uri');
      const uploadName = $(this).find('button').attr('data-name');
      if (uploadBase64) {
        $('#image_holder' + index).attr({src:uploadBase64, alt:uploadName});
      }
      else {
        $('#image_holder' + index).removeAttr('src alt');
      }
    })
  }, 1000);
</script>

<img id="image_holder0">
<img id="image_holder1">
<img id="image_holder2">
<img id="image_holder3">
<img id="image_holder4">
etc...

问题：使用$.each，这可以处理任意数量的上传以最初填充图库。但是，当上传被删除时，节点会从 DOM 中删除，因此$.each不再对其进行迭代，这意味着代码中的 else 语句永远不会被命中，并且<img>它最初填充的标签也不会被清除（图像会卡住）曾经在那里）。

如何清除<img>上传后删除的文件的链接属性，以便图库仅包含仍然存在的图像？

标签： javascriptjqueryhtml