A Pen by Alex Vazquez.

Add-Remove-Me-List.markdown

Add/Remove 'Me' List

Simple list of elements using transitions to add/remove 'me' elements.

A Pen by Alex Vazquez on CodePen.

License.

index.html

<h1>Add/Remove 'Me' List</h1>
<ul id="removeList">
  <li class="me">Remove me <i class="icon-minus pull-right"></i></li>
  <li class="me">No, me <i class="icon-minus pull-right"></i></li>
  <li class="me">Why not, me? <i class="icon-minus pull-right"></i></li>
  <li class="me">Because I am better. <i class="icon-minus pull-right"></i></li>
</ul>

<button id="add">Add more of me <i class="icon-plus pull-right"></i></button>

script.js

var count = 0;
var removeTaunt = ["Remove me", "No, me", "Why not, me?", "Because I am better."];

//removing from list
$("ul").on("click", "li", function(event) { 
  $(this).slideUp('fast',function() {
    //after animation, remove
    $(this).remove();
  });
  return false;
});
          
//adding to list
$("#add").on("click", function(event) {   
  var item = $("<li class='me' style='display: none;'>" + removeTaunt[count] + "<i class='icon-minus pull-right'></i></li>");
  $("#removeList").append(item);
  $("#removeList").find("li.me:last-child").slideDown("fast");
  
  count++;
  //reset count
  if (count === 4) {
    count = 0;
  }
  return false;
});

style.css

body {
  font-family: "Armata", sans-serif;
  font-size:14px;
  color:#222;
  margin:50px auto;
  width:960px;
}

h1 {
  margin-left:40px;
  margin-bottom:40px;
}

ul {
  list-style:none;
}

li {
  padding: 15px;
  background-color:#1A8BB2;
  border-bottom:1px solid #f2f2f2;
  margin-top:1px;
  width:180px;
  cursor:default;
  transition: background-color 0.3s ease-in-out;
}

li:first-child {
  border-top:1px solid #f2f2f2;
}

li:hover {
  background-color:#B25E4F;
  color:black;
}

li:hover i.icon-minus, button:hover i.icon-plus {
  display:block;
} {
  display:block;
}

button {
  padding: 15px;
  background-color:#87CCB2;
  border:1px solid #f2f2f2;
  width:210px;
  margin-left:40px;
  text-align:left;
  cursor:default;
  transition: background-color 0.3s ease-in-out;
}

button:hover {
  background-color:#FFAC78;
  color:black;
}

i.icon-minus, i.icon-plus {
  display:none;
}