元のJSを実現して隠れて表示します.

  
    
    
    
    
  
  
    

        
        
      

        
1
        
2
        
3
        
4
      
    
  

.wrapper .item {
  float: left;
  width: 100px;
  min-height: 100px;
  line-height: 100px;
  border: 1px solid #000;
  margin-top: 10px;
  margin-right: 10px;
  text-align: center;
}

.wrapper .style {
  border-color: red;
}

.wrapper .hide {
  display: none;
}

var wrapper = document.querySelector('.wrapper'),
    hide = document.querySelector('.btn-info'),
    show = document.querySelector('.btn-danger');

function addClass(elem, classes) {
  var className = elem.className;
  elem.className = elem.className + ' ' + classes;
}

function removeClass(elem, classes) {
  var classArr = elem.className.split(' '),
      index = 0;
  for (var i = 0, len = classArr.length; i < len; i++) {
    if (classArr[i] === classes) {
      index = i;
    }
  }
  elem.className = classArr.slice(0, index).join(' ');
}

wrapper.addEventListener('click', function(e){
  if (e.target.className.indexOf('style') === -1) {
    addClass(e.target, 'style');
  } else {
    removeClass(e.target, 'style');
  }
}, false);

hide.addEventListener('click', function(e){
 var elemArr = document.querySelectorAll('.item');
  for (var i = 0; i < elemArr.length; i++) {
    if (elemArr[i].className.indexOf('style') !== -1) {
      var current = elemArr[i];
      addClass(current, 'hide');
    }
  }
}, false);

show.addEventListener('click', function(e){
  var elemArr = document.querySelectorAll('.item');
  for (var i = 0; i < elemArr.length; i++) {
    if (elemArr[i].className.indexOf('hide') !== -1) {
      var current = elemArr[i];
      removeClass(current, 'hide')
    }
  }
}, false);