Add/Delete elements

by Sergey Linnick

HTML

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<div class="container">
  <div class="deleted-block">
    <hr>
    <h5>1</h5>
    <p>Lorem ipsum dolor.</p>

    <button class="delete-button btn btn-sm btn-danger">Delete</button>
  </div>

  <div class="deleted-block">
    <hr>
    <h5>2</h5>
    <p>Lorem ipsum dolor sit.</p>
    <button class="delete-button btn btn-sm btn-danger">Delete</button>
  </div>

  <div class="deleted-block">
    <hr>
    <h5>3</h5>
    <p>Lorem ipsum dolor sit amet.</p>
    <button class="delete-button btn btn-sm btn-danger">Delete</button>
  </div>
  <hr>
  
  <button class="btn btn-sm btn-success add-button">Add</button>
  
</div>

CSS

.danger-border{
	box-shadow: 0px 0px 0px 1px rgba(232,9,28,1);
}
.deleted-block {
  transition: box-shadow .2s ease-in-out;
}

JavaScript

$(".add-button").click(function(e) {
  e.preventDefault();
  var newHtml =
    '<div class="deleted-block">' +
    	'<hr>' +
      '<h5>New</h5>'+
      '<p>New Lorem ipsum dolor sit amet.</p>'+
    	'<button class="delete-button btn btn-sm btn-danger">Delete</button>' +
    '</div>';
  $(newHtml).hide().appendTo(".container").show();
});


$(document).on("click",".delete-button", function(e){
	e.preventDefault();
  $(this).closest('.deleted-block').addClass('danger-border');
  deleteBlock($(this));

});
function deleteBlock (el){
  setTimeout(function(){  
  	$(el).closest('.deleted-block').remove();
  }, 500);
}