JSFiddle - React, Tailwind, and code Playground
by Alexis LĂłpez Espinoza
HTML
<section id="respuesta"></section>
<span id="agregar">Agregar</span>
CSS
span{
display: inline-block;
border-radius: .5rem;
cursor: pointer;
color: white;
padding: .5rem .25rem;
}
span:hover{
-webkit-filter: brightness(1.2);
}
#agregar{
background-color: green;
margin-top: 2.5%;
}
.eliminar{
background-color: red;
margin-left: 1.5%;
}
#respuesta{
border: .1rem solid;
}
.bloque{
margin-top: .5%;
margin-bottom: .5%;
}
JavaScript
$(document).ready(function(){
$("#agregar").on("click", function(){
$("#respuesta").append("<div class='bloque'><label>" + (new Date).getTime() + "</label><span class='eliminar'>Eliminar</span></div>");
});
$("#respuesta").on("click", ".eliminar", function(){
$(this).parent(".bloque").remove();
});
});