Question

我目前正在开发一个网络应用程序我一直在删除我创建的元素。

我正在使用jQuery来显示缩略图，我尝试在右上角添加一个悬停X，on-click将删除缩略图和原始文件上传在发送表格之前。

这是我的代码：

＆＃13;

$(document).ready(function() {
  // This is where I create the thumbnail:
  $('#uploadImage').on('change', function() {
    resizeImages(this.files[0], function(dataUrl) {
      $('#photo1').val(dataUrl);
      document.getElementById("uploadPreview").src = dataUrl;
    });
  });

  // This is where I am attempting to delete it:
  $('.hiddenImages .close').on('click', function() {
    var id = $(this).closest('.hiddenImages').find('img').data('id');
    alert('remove picture: ' + id);
    document.getElementById(".hiddenImages").remove();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pictureHolders">
  <div class="hiddenImages">
    <span class="close">&times;</span>
    <img id="uploadPreview" data-id="photo-1" style="width: 100px; 
    height: 100px;" />
  </div>
  <div class="hiddenImages">
    <span class="close">&times;</span>
    <img id="uploadPreview2" data-id="photo-2" style="width: 100px; 
      height: 100px;" />
  </div>
  <div class="hiddenImages">
    <span class="close">&times;</span>
    <img id="uploadPreview3" data-id="photo-3" style="width: 
      100px; height: 100px;" />
  </div>
  <div class="hiddenImages">
    <span class="close">&times;</span>
    <img id="uploadPreview4" data-id="photo-4" style="width: 100px; 
       height: 100px;" />
  </div>
</div>
<div class="inputs">
  <div> Photo 1:
    <input type="text" id="desc1" name="desc1" />
    <input id="uploadImage" type="file" />
  </div>
  <input type="hidden" class="photos" id="photo1" name="photo1" value="" />
  <br/>
  <div> Photo 2:
    <input type="text" id="desc2" name="desc2" />
    <input id="uploadImage2" type="file" />
  </div>
  <input type="hidden" class="photos" id="photo2" name="photo2" value="" />
  <br/>
  <div> Photo 3:
    <input type="text" id="desc3" name="desc3" />
    <input id="uploadImage3" type="file" />
  </div>
  <input type="hidden" class="photos" id="photo3" name="photo3" value="" />
  <br/>
  <div> Photo 4:
    <input type="text" id="desc4" name="desc4" />
    <input id="uploadImage4" type="file" />
  </div>
  <input type="hidden" class="photos" id="photo4" name="photo4" value="" />

  <br/>
</div>

＆＃13;

任何帮助都将不胜感激。

Answer 1

您正尝试使用getElemlementById

中的类名来获取标识符的句柄

您应该只需删除已隐藏x的容器，类似于：$(this).closest('.hiddenImages').remove();

此外，x上的click事件选择器可能需要在删除绑定容器时进行更改，因此任何新的.hiddenImages容器都不会绑定该click事件。

您可能需要将$('.hiddenImages .close').on('click', function...更新为$('.pictureHolders').on('click', '.hiddenImages .close', function...

＆＃13;

$(document).ready(function() {
  // This is where I create the thumbnail:
  $('#uploadImage').on('change', function() {
    resizeImages(this.files[0], function(dataUrl) {
      $('#photo1').val(dataUrl);
      document.getElementById("uploadPreview").src = dataUrl;
    });
  });

  // This is where I am attempting to delete it:
  $('.pictureHolders').on('click', '.hiddenImages .close', function() {
    $(this).closest('.hiddenImages').remove();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pictureHolders">
  <div class="hiddenImages">
    <span class="close">&times;</span>
    <img id="uploadPreview" data-id="photo-1" style="width: 100px; 
    height: 100px;" />
  </div>
  <div class="hiddenImages">
    <span class="close">&times;</span>
    <img id="uploadPreview2" data-id="photo-2" style="width: 100px; 
      height: 100px;" />
  </div>
  <div class="hiddenImages">
    <span class="close">&times;</span>
    <img id="uploadPreview3" data-id="photo-3" style="width: 
      100px; height: 100px;" />
  </div>
  <div class="hiddenImages">
    <span class="close">&times;</span>
    <img id="uploadPreview4" data-id="photo-4" style="width: 100px; 
       height: 100px;" />
  </div>
</div>
<div class="inputs">
  <div> Photo 1:
    <input type="text" id="desc1" name="desc1" />
    <input id="uploadImage" type="file" />
  </div>
  <input type="hidden" class="photos" id="photo1" name="photo1" value="" />
  <br/>
  <div> Photo 2:
    <input type="text" id="desc2" name="desc2" />
    <input id="uploadImage2" type="file" />
  </div>
  <input type="hidden" class="photos" id="photo2" name="photo2" value="" />
  <br/>
  <div> Photo 3:
    <input type="text" id="desc3" name="desc3" />
    <input id="uploadImage3" type="file" />
  </div>
  <input type="hidden" class="photos" id="photo3" name="photo3" value="" />
  <br/>
  <div> Photo 4:
    <input type="text" id="desc4" name="desc4" />
    <input id="uploadImage4" type="file" />
  </div>
  <input type="hidden" class="photos" id="photo4" name="photo4" value="" />

  <br/>
</div>

＆＃13;

Answer 2

$('.hiddenImages .close').on('click', function() {
    var id = $(this).closest('.hiddenImages').find('img').data('id');
    alert('remove picture: ' + id);
    document.getElementById(".hiddenImages").remove();
  });

成为：

$('.hiddenImages .close').on('click', function() {
  var img = $(this).closest('.hiddenImages').find('img');
  img.remove()
});

如何使用表单和控制器来存储输入

2 个答案: