how to use a form and controller to store inputs

+1 vote
asked Sep 12, 2017 by marshall-munoz

I'm currently working on a web app I'm stuck on deleting the elements that I have created.

I'm using jQuery to display thumbnail pictures and I'm trying to include a hovering X to the top right corner that will on-click delete the thumbnail and the original file upload before sending the form.

This is my code:

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

2 Answers

+1 vote
answered Sep 12, 2017 by nope

You are trying to get a handle to an identifier by using a class name inside getElemlementById

You should be able to simply remove the container of the clcked x, similar to this: $(this).closest('.hiddenImages').remove();

In addition your selector for the click event on the x might need to change as you are removing the container your binding to and as such any new .hiddenImages container will not have that click event bound.

You might need to update $('.hiddenImages .close').on('click', function... to $('.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>
0 votes
answered Sep 12, 2017 by daniele-dolci
$('.hiddenImages .close').on('click', function() {
    var id = $(this).closest('.hiddenImages').find('img').data('id');
    alert('remove picture: ' + id);
    document.getElementById(".hiddenImages").remove();
  });

become:

$('.hiddenImages .close').on('click', function() {
  var img = $(this).closest('.hiddenImages').find('img');
  img.remove()
});
Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...