How to separate events using jquery input type file filter

Question

I made a filter for input type file. It works on change function. There is 2 events: ok and error and 2 messages.

Problem is that after reloading(or loading anytime) page value of input is empty, but function onchange works, and give me error message in frontend(because there is no filter access for empty value).

I want to display third message, if value is empty, but suddenly my function doesn't want to work.

UPDATE

And doesn't work .remove fonction. I made it, if person try several times to choose a file, than it get 1 message, instead messages = times he try.

So code

(function($) {
    $('#resume').on('change', function() {
        var err = "error-upload";
        var ok = "upload-ok";
        var ext = $('#resume').val().split(".").pop().toLowerCase();
        if ($.inArray(ext, ["doc", "pdf", 'docx', "jpeg", "jpg", "png"]) == -1) {
            $(".error-upload-wrap").remove(".error-upload");
            $(".error-upload-wrap").remove(".upload-ok");
            $(".error-upload-wrap").append("<div class=" + err + ">Error</div>")
            // false 
        } else {
            $(".error-upload-wrap").remove(".upload-ok");
            $(".error-upload-wrap").remove(".error-upload");
            $(".error-upload-wrap").append("<div class=" + ok + ">Ok</div>");
            // true
        }
    });
})(jQuery);

Help me please!

(function($) {
  $('#resume').on('change', function() {
    var err = "error-upload";
    var ok = "upload-ok";
    var ext = $('#resume').val().split(".").pop().toLowerCase();
    if ($.inArray(ext, ["doc", "pdf", 'docx', "jpeg", "jpg", "png"]) == -1) {
      $(".error-upload-wrap").remove(".error-upload");
      $(".error-upload-wrap").remove(".upload-ok");
      $(".error-upload-wrap").append("<div class=" + err + ">Вы загрузили файл в неправильном формате <strong>." + ext + "</strong>! Допустимые форматы: .jpeg, .png, .jpg, .pdf, .doc, .docx</div>")

      // false 
    } else {
      $(".error-upload-wrap").remove(".upload-ok");
      $(".error-upload-wrap").remove(".error-upload");
      $(".error-upload-wrap").append("<div class=" + ok + ">Вы загрузили файл в правильном формате!</div>");
      // true
    }
  });
})(jQuery);

#check_link {
  border: none;
  background-color: #008600;
  text-transform: uppercase;
  border-radius: 0;
  text-decoration: none;
  float: right;
  margin-left: 15px;
  font-size: 13px !important;
  line-height: 25px !important;
  padding: 0 40px !important;
  color: #fff;
}
.error-upload {
  background-color: #f2dede;
  border-color: #ebccd1;
}
.upload-ok {
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.error-upload-wrap div {
  border: 1px solid transparent;
  font-size: 13px;
  color: #767676;
  padding: 15px;
  float: left;
  width: 100%;
  position: relative;
  padding-left: 60px !important;
  line-height: 24px;
  margin-bottom: 20px !important;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.upload-ok:before {
  content: "\f00c";
}
.error-upload:before {
  content: "\f00d";
}
.error-upload-wrap div:before {
  position: absolute;
  top: 50%;
  left: 25px;
  margin-top: -11px;
  line-height: 1;
  font-size: 24px;
  font-family: FontAwesome;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" class="input-text addon" multiple="multiple" id="resume" />
<div class="error-upload-wrap"></div>

Answer 1

Looks like you need to use this because

$('selector1') selects elements with selector1. Then remove('selector2') removes the elements in the selected by selector1 which also has selector2.

A selector expression that filters the set of matched elements to be removed.

$(".error-upload-wrap .error-upload").remove();
$(".error-upload-wrap .upload-ok").remove();

See the demo below.

(function($) {
  $('#resume').on('change', function() {
    var err = "error-upload";
    var ok = "upload-ok";
    var ext = $('#resume').val().split(".").pop().toLowerCase();
    if ($.inArray(ext, ["doc", "pdf", 'docx', "jpeg", "jpg", "png"]) == -1) {
      $(".error-upload-wrap .error-upload").remove();
      $(".error-upload-wrap .upload-ok").remove();
      $(".error-upload-wrap").append("<div class=" + err + ">Вы загрузили файл в неправильном формате <strong>." + ext + "</strong>! Допустимые форматы: .jpeg, .png, .jpg, .pdf, .doc, .docx</div>")
      // false 
    } else {
      $(".error-upload-wrap .upload-ok").remove();
      $(".error-upload-wrap .error-upload").remove();
      $(".error-upload-wrap").append("<div class=" + ok + ">Вы загрузили файл в правильном формате!</div>");
      // true
    }
  });
})(jQuery);

#check_link {
  border: none;
  background-color: #008600;
  text-transform: uppercase;
  border-radius: 0;
  text-decoration: none;
  float: right;
  margin-left: 15px;
  font-size: 13px !important;
  line-height: 25px !important;
  padding: 0 40px !important;
  color: #fff;
}
.error-upload {
  background-color: #f2dede;
  border-color: #ebccd1;
}
.upload-ok {
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.error-upload-wrap div {
  border: 1px solid transparent;
  font-size: 13px;
  color: #767676;
  padding: 15px;
  float: left;
  width: 100%;
  position: relative;
  padding-left: 60px !important;
  line-height: 24px;
  margin-bottom: 20px !important;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.upload-ok:before {
  content: "\f00c";
}
.error-upload:before {
  content: "\f00d";
}
.error-upload-wrap div:before {
  position: absolute;
  top: 50%;
  left: 25px;
  margin-top: -11px;
  line-height: 1;
  font-size: 24px;
  font-family: FontAwesome;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" class="input-text addon" multiple="multiple" id="resume" />
<div class="error-upload-wrap"></div>

Answer 2

Why dont you just check if the value is empty inside the onchange event. Like below.

    (function($) {
    $('#resume').on('change', function() {
      if(!$.trim($(this).val()) == ''){ // check if input value is not empty
        var err = "error-upload";
        var ok = "upload-ok";
        var ext = $('#resume').val().split(".").pop().toLowerCase();
        if ($.inArray(ext, ["doc", "pdf", 'docx', "jpeg", "jpg", "png"]) == -1) {
            $(".error-upload-wrap").remove(".error-upload");
            $(".error-upload-wrap").remove(".upload-ok");
            $(".error-upload-wrap").append("<div class=" + err + ">Error</div>")
            // false 
        } else {
            $(".error-upload-wrap").remove(".upload-ok");
            $(".error-upload-wrap").remove(".error-upload");
            $(".error-upload-wrap").append("<div class=" + ok + ">Ok</div>");
            // true
        }
      }
      else{ // if its empty
        //do your stuff as the input value is empty.
      }
    });
})(jQuery);

Answer 3

You have to check if the element to be removed is actually available in the DOM:

$('#resume').on('change', function() {
    var err = "error-upload";
    var ok = "upload-ok";
    var ext = $('#resume').val().split(".").pop().toLowerCase();
    if ($.inArray(ext, ["doc", "pdf", 'docx', "jpeg", "jpg", "png"]) == -1) {
        $(".error-upload-wrap").append("<div class='" + err + "'>Error</div>")
        // false 
    } else {
        $(".error-upload-wrap").append("<div class='" + ok + "'>Ok</div>");
        // true
    }

    if($('.'+err).length || $('.'+ok).length){
       $(".error-upload-wrap").remove(".error-upload, .upload-ok");
    }
});