Can't empty div with jquery

Question

I'm trying to build a image preview for uploaded files but i want the images to update their previews when user re-uploades on the same input. The code that i wrote for multiple images works but the one with primary image doesn't.

$(function() {

  // Multiple images preview in browser
  var imagesPreview = function(input, placeToInsertImagePreview, type) {
    if (type === 'multiple') {
      if ($('#gallery').children().length > 1) {
        $('#gallery').children().slice(1).remove();
      }
    } else if (type === 'primary') {
      $('#primary').empty();
    }

    if (input.files) {
      var filesAmount = input.files.length;

      for (i = 0; i < filesAmount; i++) {
        var reader = new FileReader();

        reader.onload = function(event) {
          $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview).addClass('col rounded upload-img shadow-sm');

        }

        reader.readAsDataURL(input.files[i]);
      }
    }
    var $fileUpload = $("input[type='file']");
    if (parseInt($fileUpload.get(0).files.length) > 2) {
      alert("You can only upload a maximum of 2 files");
    }
  };

  $('#gallery-photo-add').on('change', function() {
    imagesPreview(this, 'div.gallery', 'multiple');
  });
  $('#primary').on('change', function() {
    imagesPreview(this, 'div.primary', 'primary');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" name="image[]" multiple id="gallery-photo-add">
<div class="card primary" id="primary"></div>
<div class="gallery row" id="gallery"></div>

I tried to console log inside

          }else if (type === 'primary') {
              $('#primary').empty();
              console.log('deleted');
          }

It displays deleted but does nothing. Also i've tried something like this too

          }else if (type === 'primary') {
              $('#primary').children().remove();
          }

Still no luck. What am i missing?

Here's the full inputs

            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="inputGroupFileAddon01">@lang('product.upload')</span>
                    </div>
                    <div class="custom-file">
                        <input type="file" class="custom-file-input" id="primary" name="primaryimg" aria-describedby="primary">
                        <label class="custom-file-label" for="primaryimg">Choose file</label>
                    </div>
                </div>
                <input type="file" name="image[]" multiple id="gallery-photo-add">
                <div class="card primary" id="primary"></div>
                <div class="gallery row" id="gallery"></div>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>

Your div with id `primary` is already empty. It does not have any children. — random, Jul 09 '19 at 12:17
@randomSoul Yes in the beggining, but when user uploads it appends images to selected div. I just want to empty everytime when user uploads — Areg, Jul 09 '19 at 12:18
@Areg, does the image appending happen before or after your `empty()` function? — Krishna Prashatt, Jul 09 '19 at 12:19
It still displays all images uploaded through that input. doesn't empty anything — Areg, Jul 09 '19 at 12:20
maybe the problme is in other part of your code, try adding all relevant parts of your code to the question — Nikos M., Jul 09 '19 at 12:20
Did you try debugging? By the time the debugger reaches `$('#primary').empty();` are you sure the `div` already has children inserted? — Krishna Prashatt, Jul 09 '19 at 12:22
@KrishnaPrashatt yes i used both console.log and inspect element to make sure everything's right — Areg, Jul 09 '19 at 12:22
Can you add the structure of your markup just before `$('#primary').empty();` --> this is executed? — Krishna Prashatt, Jul 09 '19 at 12:23
@Areg Maybe `#primary` is always empty.. For testing it, remove the `$('#primary').empty();` and make a `console.log($('#primary').html();)` to see whats `$('#primary')` has inside it. — Roy Bogado, Jul 09 '19 at 12:25
@Areg, In the code present in your question, `primary` belongs to the id of a `div`. But in the markup comment, it belongs to the file element. A specific DOM should not have repetitive ids — Krishna Prashatt, Jul 09 '19 at 12:30
Give a different id for the div and target that id same like you have different ids for multiple files. All is well :) — Krishna Prashatt, Jul 09 '19 at 12:32
Why using empty? Why don't you $('#singleFile').html('') ? It will have the same effect. — Marco, Jul 09 '19 at 12:42
@Marco Why not use empty? It has the same effect as .html("") — mplungjan, Jul 09 '19 at 12:55
LOL you are right, but i was just curious. But reading the docs, i think html('') is faster. Empty actually removes all childs, where html just replaces innerHTML for empty string. — Marco, Jul 09 '19 at 13:16

score 3 · Answer 1 · answered Jul 09 '19 at 12:28

You can use files on the input to get the length:

var filesCount = $(this)[0].files.length;

$(function() {

  // Multiple images preview in browser
  var imagesPreview = function(input, placeToInsertImagePreview, type) {
    if (type === 'multiple') {
      if ($('#gallery').children().length > 1) {
        $('#gallery').children().slice(1).remove();
      }
    } else if (type === 'primary') {
      $('#primary').empty();
    }

    if (input.files) {
      var filesAmount = input.files.length;

      for (i = 0; i < filesAmount; i++) {
        var reader = new FileReader();

        reader.onload = function(event) {
          $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview).addClass('col rounded upload-img shadow-sm');

        }

        reader.readAsDataURL(input.files[i]);
      }
    }
    var $fileUpload = $("input[type='file']");
    if (parseInt($fileUpload.get(0).files.length) > 2) {
      alert("You can only upload a maximum of 2 files");
    }
  };

  $('#gallery-photo-add').on('change', function() {
    var filesCount = $(this)[0].files.length;
    console.log(filesCount);
    imagesPreview(this, 'div.gallery', 'multiple');
  });
  $('#primary').on('change', function() {
    imagesPreview(this, 'div.primary', 'primary');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" name="image[]" multiple id="gallery-photo-add">
<div class="card primary" id="primary"></div>
<div class="gallery row" id="gallery"></div>

score 0 · Accepted Answer · answered Jul 09 '19 at 12:38

As per the edit you have posted, there are two DOM elements with the same id primary(file element and a div). But at no particular instance a DOM should be having two elements with the same ids. So if you want your single file upload to work like the same as multiple files, use a different id for the div that you need to empty.Like

<div class="card primary" id="singlefile"></div>

You can empty this div by targeting the id like

}else if (type === 'primary') {
          $('#singlefile').empty();
          console.log('deleted');
      }

Hope this helps.

Can't empty div with jquery

2 Answers2