如何使用窗体和控制器存储输入

Question

目前，我正在开发一个web应用程序，我一直致力于删除我创建的元素。

我使用jQuery显示缩略图，并试图在右上角包含一个悬停的X，以便在发送表单之前删除缩略图和原始文件上传。

这是我的密码：

​

$(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();
  });
});

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

​

任何帮助都将不胜感激。

Answer 1

您正试图通过在getElemlementById中使用类名获取标识符的句柄。

您应该能够简单地删除已单击的x的容器，类似于以下内容：$(this).closest('.hiddenImages').remove();

此外，x上单击事件的选择器可能需要更改，因为您正在移除绑定到的容器，因此任何新的.hiddenImages容器都不会有单击事件绑定。

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

​

$(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();
  });
});

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

​

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()
});