.Empty() in javascript, how to do?

Asked

Viewed 7,451 times

4

I am using a preview script for images created with jquery, but I want to perform it in Javascript Vanilla, I am looking for a way to replace the variable command All.Empty(); however I could not find, how to replace this command ?

Code in Jquery

$("#fileUpload").on('change', function () {

    if (typeof (FileReader) != "undefined") {

        var image_holder = $("#image-holder");
        image_holder.empty();

        var reader = new FileReader();
        reader.onload = function (e) {
            $("<img />", {
                "src": e.target.result,
                "class": "thumb-image"
            }).appendTo(image_holder);
        }
        image_holder.show();
        reader.readAsDataURL($(this)[0].files[0]);
    } else{
        alert("Este navegador não suporta FileReader.");
    }
});
javascript jquery
  • 3

    You want to replace the command Empty(); of jquery with the native js is this?

  • exact bro :D want to know how it works in vanilla

  • 1

    I think that ele.innerHTML = ''; resolves

  • for an input of type file ? for example file.innerHTML = null ?

  • You want to take the selected file out of the input file is that? inputfile.value='';

  • So, I’m not sure what logic was used by the guy, but I’ll update the question with the code in jquery

  • 1

    The function empty jQuery excludes all child elements from the selected element. In this case, it would exclude all child elements img within the element #image-holder. In the vanilla, the equivalent would be something like document.getElementById("image-holder").innerHTML = '', just like Miguel said.

  • thanks, someone could formulate a reply to give as conclusion ?

Show 3 more comments

2 answers

5


The .empty() in which case it is simply innerHTML = '';.

This native Javascript script could be like this:

var input = document.getElementById('input');
var image_holder = document.getElementById('image-holder');
input.addEventListener('change', function() {

  if (typeof FileReader != "undefined") {
    image_holder.innerHTML = '';
    var reader = new FileReader();
    reader.onload = function(e) {
      var img = document.createElement('img');
      img.src = e.target.result;
      img.className = 'thumb-image';
      image_holder.appendChild(img);
    }
    image_holder.style.display = 'block'; // aqui poderá haver outras variantes para mostrar o elemento
    reader.readAsDataURL(this.files[0]);
  } else {
    alert('Este navegador não suporta FileReader.');
  }
});

  • the whole code was passed to vanilla ?

  • 1

    @Exact withering. What you had in question was what I "converted".

  • Now I have left a doubt, the following excerpt is causing error reader.readAsDataURL($(this)[0].files[0]); - Cannot read property 'files' of undefined&#xA; at HTMLInputElement.imageFileInput.onchange

  • obg man :) helped dms]

  • 1

    @Murilogambôa had failed me this. $(this)[0] is the same as only this. Pretty clear how unnecessary jQuery is :D

5

Sergio’s answer is correct, but I’ll leave here an alternative that has better performance - useful if you need to optimize your application.

The function below takes an element from the DOM and removes all its child elements, one by one, until it is empty:

function empty(el) {
    while(el.children.length) {         // enquanto houver filhos
        el.removeChild(el.children[0]); // remove o primeiro filho
    }
}

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.