javascript - 如何使用表单和 Controller 来存储输入

Question

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

我正在使用 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

您正在尝试使用 getElemmentById 中的类名来获取标识符的句柄

您应该能够简单地删除 clcked x 的容器，类似于:$(this).closest('.hiddenImages').remove();

此外，当您删除绑定(bind)到的容器时，x 上的单击事件的选择器可能需要更改，因此任何新的 .hiddenImages 容器都会没有绑定(bind)该点击事件。

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

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