<button>ADD MORE</button> <ul> <li style="background-image: url(http://lorempixel.com/100/100/);" class="aimg"><span>SELECT</span><span>DELETE</span></li> <li style="background-image: url(http://lorempixel.com/100/100/);" class="aimg"><span>SELECT</span><span>DELETE</span></li> <li style="background-image: url(http://lorempixel.com/100/100/);" class="aimg"><span>SELECT</span><span>DELETE</span></li> <li style="background-image: url(http://lorempixel.com/100/100/);" class="aimg"><span>SELECT</span><span>DELETE</span></li> </ul>
* { font-family: arial; box-sizing: border-box; -moz-box-sizing: border-box; } ul { list-style-type: none; margin: 0px; padding: 0px; } ul li { padding-top: 35px; float: left; width: 110px; height: 110px; background-position: center center; background-repeat: no-repeat; border: 1px solid #ccc; background-color: #f0f0f0; margin: 0 10px 10px 0; } ul li span { display: none; background-color: rgba(0,0,0,0.5); color: #555; text-align: center; margin: 0px 15px 10px 15px; color: #fff; border-radius: 5px; padding: 3px; cursor: pointer; } ul li:hover span { display: block; } ul li:hover span:hover { background-color: rgba(0,0,0,1); } ul li.selected { border: 2px solid #000; }
$('ul').on('click','li span:first-child', function(){ if($(this).parent().hasClass('selected')) { $(this).parent().removeClass('selected'); } else { $(this).parent().addClass('selected'); } } ); $('ul').on('click','li span:nth-child(2)', function(){ $(this).parent().fadeOut(300, function(){ $(this).remove(); }); } ); $('button').click(function(){ $('<li style="background-image: url(http://lorempixel.com/100/100/)" class="aimg"><span>SELECT</span><span>DELETE</span></li>').hide().appendTo('ul').fadeIn(300); });