Div not hidding in one click

i have this alert box that is showed when in the form there is no name or no category or no description , i have already used this alert box but with php in other page , but , in this page where im using jquery to print it out i cant close it in one click , actually it take two click to be able to close it.

jquery

$("#UploadCover").click(function(){
    if(!$("#CoverName").val()){
        $(".navbar-container").append('<div class="alert danger">'+
            '<span class="closebtn" onclick="this.parentElement.style.display=\'none\';">&times;</span>' +
            '<strong>Error!</strong> Must have a name!'+
            '</div>');
    }else{
        var sel1 =  $("#addArtCat1").find("option:selected").val();
        var sel2 =  $("#addArtCat2").find("option:selected").val();
        var sel3 =  $("#addArtCat3").find("option:selected").val();
        var sel4 =  $("#addArtCat4").find("option:selected").val();
        var sel5 =  $("#addArtCat5").find("option:selected").val();
        var count = 0;
        var selArray = [sel1, sel2, sel3, sel4, sel5];
        for(var i=1 ; i <= 5 ; i++){
            if(selArray[i] == "---"){
                count++
            }
        }

        if(count >= 4){
            $(".navbar-container").append('<div class="alert danger">'+
                '<span class="closebtn" onclick="this.parentElement.style.display=\'none\';">&times;</span>' +
                '<strong>Error!</strong> Must at least chose a category'+
                '</div>');
        }else{
            if(!$("#CoverDescription").val()){
                $(".navbar-container").append('<div class="alert danger">'+
                    '<span class="closebtn" onclick="this.parentElement.style.display=\'none\';">&times;</span>' +
                    '<strong>Error!</strong> Must have a description'+
                    '</div>');  
            }else{
                alert("fsdfds");
            }
        }
    }
}); 

Form

div id="popup-add-cover" class="popup-black-cover">
        <div class="popup-content-wrapper addCover">
            <div class="popup-content-container">
                <div class="popup-content">
                    <form>
                        Cover image:<br>
                        <label for="coverimage-input">
                            <img src="Images/user.png"/ style="border: 1px solid black">
                        </label>
                        <input id="coverimage-input" type="file" required ><br>

                        name:<br>
                        <input type="text" name="CoverName" id="CoverName" size="40" required ><span style="color: red;">*</span><br>

                        genre:<br>
                        <select class = "artcategoria" name="addArtCat" id="addArtCat1">
                            <option value="---">---</option>
                            <option value="acao">Action</option>
                            <option value="aventura">Adventure</option>
                            <option value="comedia">Comedy</option>
                            <option value="crime">Crime</option>
                            <option value="drama">Drama</option>
                            <option value="fantasia">Fantasy</option>
                            <option value="gore">Gore</option>
                            <option value="historico">Historical</option>
                            <option value="horror">Horror</option>
                            <option value="magia">Magic</option>
                            <option value="artesmarciais">Martial Arts</option>
                            <option value="misterio">Mistery</option>
                            <option value="parodia">Parody</option>
                            <option value="policia">Police</option>
                            <option value="psicologico">Psychological</option>
                            <option value="romance">Romance</option>
                        </select>

                        <select class = "artcategoria" name="addArtCat" id="addArtCat2">
                            <option value="---">---</option>
                            <option value="acao">Action</option>
                            <option value="aventura">Adventure</option>
                            <option value="comedia">Comedy</option>
                            <option value="crime">Crime</option>
                            <option value="drama">Drama</option>
                            <option value="fantasia">Fantasy</option>
                            <option value="gore">Gore</option>
                            <option value="historico">Historical</option>
                            <option value="horror">Horror</option>
                            <option value="magia">Magic</option>
                            <option value="artesmarciais">Martial Arts</option>
                            <option value="misterio">Mistery</option>
                            <option value="parodia">Parody</option>
                            <option value="policia">Police</option>
                            <option value="psicologico">Psychological</option>
                            <option value="romance">Romance</option>
                        </select>

                        <select class = "artcategoria" name="addArtCat" id="addArtCat3">
                            <option value="---">---</option>
                            <option value="acao">Action</option>
                            <option value="aventura">Adventure</option>
                            <option value="comedia">Comedy</option>
                            <option value="crime">Crime</option>
                            <option value="drama">Drama</option>
                            <option value="fantasia">Fantasy</option>
                            <option value="gore">Gore</option>
                            <option value="historico">Historical</option>
                            <option value="horror">Horror</option>
                            <option value="magia">Magic</option>
                            <option value="artesmarciais">Martial Arts</option>
                            <option value="misterio">Mistery</option>
                            <option value="parodia">Parody</option>
                            <option value="policia">Police</option>
                            <option value="psicologico">Psychological</option>
                            <option value="romance">Romance</option>
                        </select>

                        <select class = "artcategoria" name="addArtCat" id="addArtCat4">
                            <option value="---">---</option>
                            <option value="acao">Action</option>
                            <option value="aventura">Adventure</option>
                            <option value="comedia">Comedy</option>
                            <option value="crime">Crime</option>
                            <option value="drama">Drama</option>
                            <option value="fantasia">Fantasy</option>
                            <option value="gore">Gore</option>
                            <option value="historico">Historical</option>
                            <option value="horror">Horror</option>
                            <option value="magia">Magic</option>
                            <option value="artesmarciais">Martial Arts</option>
                            <option value="misterio">Mistery</option>
                            <option value="parodia">Parody</option>
                            <option value="policia">Police</option>
                            <option value="psicologico">Psychological</option>
                            <option value="romance">Romance</option>
                        </select>

                        <select class = "artcategoria" name="addArtCat" id="addArtCat5">
                            <option value="---">---</option>
                            <option value="acao">Action</option>
                            <option value="aventura">Adventure</option>
                            <option value="comedia">Comedy</option>
                            <option value="crime">Crime</option>
                            <option value="drama">Drama</option>
                            <option value="fantasia">Fantasy</option>
                            <option value="gore">Gore</option>
                            <option value="historico">Historical</option>
                            <option value="horror">Horror</option>
                            <option value="magia">Magic</option>
                            <option value="artesmarciais">Martial Arts</option>
                            <option value="misterio">Mistery</option>
                            <option value="parodia">Parody</option>
                            <option value="policia">Police</option>
                            <option value="psicologico">Psychological</option>
                            <option value="romance">Romance</option>
                        </select><span style="color: red;">*</span><br>

                        type:<br>
                        <select class = "artcategoria" name="addarttipo" required>
                            <option value="manga">Manga</option>
                            <option value="mawa">Manhwa</option>
                            <option value="comic">Comic</option>
                            <option value="gagcartoon">Gag Cartoon</option>
                            <option value="other">other</option>
                        </select><span style="color: red;">*</span><br>
                        <textarea cols="50" rows="10" name="CoverDescription" id="CoverDescription"></textarea><span style="color: red;">*</span><br>
                        <input type="submit" id="UploadCover" name="UploadCover" class="buttonpopup" value="Ok">
                        <input type="button" id="NotUploadCover" name="NotUploadCover"  class="buttonpopup" value="Cancel">                 
                    </form> 
                </div>          
            </div>
        </div>
    </div>

1 answer

  • answered 2017-06-17 18:59 neeraj pathak

    why are you append div and span in (.nvabar)class? You can use easily anchor tag for show and hide popup