fadeout remove one by one element

by slawe

HTML

<a href="#" class="addNew">Add New</a>
<ul id="myList">
  <li class="dugme" draggable="true" data-order="0">Coffee<div class="count" data-col-moves="0"></div></li>
  <li class="dugme" draggable="true" data-order="1">Tea<div class="count" data-col-moves="0"></div></li>
  <li class="dugme" draggable="true" data-order="2">Milk<div class="count" data-col-moves="0"></div></li>
  <li class="dugme" draggable="true" data-order="3">Kafa<div class="count" data-col-moves="0"></div></li>
  <li class="dugme" draggable="true" data-order="4">Caj<div class="count" data-col-moves="0"></div></li>
  <li class="dugme" draggable="true" data-order="5">Mlijeko<div class="count" data-col-moves="0"></div></li>
  <li class="dugme" draggable="true" data-order="6">Pivo<div class="count" data-col-moves="0"></div></li>
  <li class="dugme" draggable="true" data-order="7">Rakija<div class="count" data-col-moves="0"></div></li>
  <li class="dugme" draggable="true" data-order="8">Liker<div class="count" data-col-moves="0"></div></li>
  <li class="dugme" draggable="true" data-order="9">Konjak<div class="count" data-col-moves="0"></div></li>
  <li class="dugme" draggable="true" data-order="10">Vinjak<div class="count" data-col-moves="0"></div></li>
  <li class="dugme" draggable="true" data-order="11">Stomaklija<div class="count" data-col-moves="0"></div></li>
</ul>

CSS

[draggable] {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
#myList {
    display: block;
    position: absolute;
    cursor: pointer;
    list-style: none;
}
.dugme {
    /* display: inline; */
    text-align: center;
    padding: 5px;
    margin-bottom: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.dugme.hide {
    opacity: 0;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
}

JavaScript

var button = document.querySelectorAll('.dugme'),
    addNew = document.querySelector('.addNew'),
    myList = document.getElementById('myList');

addNew.addEventListener('click', function(ev) {
    ev.preventDefault();
    
    var counter = 0;
    var li = document.createElement('li'),
        counter = myList.children.length + 1;
    
    li.appendChild(document.createTextNode('Button - '+counter));
    li.setAttribute('class', 'dugme');
    li.setAttribute('draggable', 'true');
    myList.appendChild(li);
}, false);
//or for(var i in buttton)
for(var i = 0; i < button.length; i++) {
    button[i].addEventListener('click', function(e) {
        e.preventDefault();
        
        this.className += ' hide';
        var that = this;
        
        setTimeout(function(){
            that.remove();
        }, 1000);
    }, false);
}
//or same code but use foreach loop
//[].forEach.call(button, function(elem) {
//        elem.addEventListener('click', function(e) {
//        e.preventDefault();
//        
//        this.className += ' hide';
//        var that = this;
//        
//        setTimeout(function(){
//            that.remove();
//        }, 1000);
//    }, false);
//
//});

var dragSrcEl_ = null;
 this.handleDragStart = function (e) {
     e.dataTransfer.effectAllowed = 'move';
     e.dataTransfer.setData('text/html', this.innerHTML);
     dragSrcEl_ = this;
     this.classList.add('moving');
 };
 this.handleDragOver = function (e) {
     if (e.preventDefault) {
         e.preventDefault();
     }
     e.dataTransfer.dropEffect = 'move';
     return false;
 };
 this.handleDragEnter = function (e) {
     this.classList.add('over');
 };
 this.handleDragLeave = function (e) {
     this.classList.remove('over');
 };
 this.handleDrop = function (e) {
     if (e.stopPropagation) {
         e.stopPropagation();
     }
     if (dragSrcEl_ != this) {
         //part 4 sorting/ordering (not finished not perfect solution)
         var array = [];
         
    ...