JSFiddle - React, Tailwind, and code Playground

http://stackoverflow.com/questions/30731979/deleting-and-restoring-divs-toggle/30732893#30732893

by web-nfo.com

HTML

<div id="removedItems">
    <span>Removed items:</span>
</div>

<div id="items">
    <span>Current items:</span>
    <div class="item">
        <h3>Item1</h3>
        <span class="remove">Remove</span>
    </div>
    <div class="item">
        <h3>Item2</h3>
        <span class="remove">Remove</span>
    </div>
    <div class="item">
        <h3>Item3</h3>
        <span class="remove">Remove</span>
    </div>
</div>

CSS

#removedItems { padding:10px; border-bottom:1px solid #333; }
.item { background:#333; margin:5px; padding:5px; display:inline-block; color:#FFF; }
.item span.remove { cursor:pointer; }
.item span.remove:hover { color:red; }

.item.removed { background:red; }
.item.removed h3 { margin:0px; font-size:14px; }
.item.removed span.remove { display:none; }

JavaScript

$(document).ready(function(){
    $('.item span.remove').click(function(){
        // Find the item
        var $item = $(this).parent();
        
        // Change the item
        $item
        .addClass('removed')
        .find('h3').append('<span>[removed]</span>');
        
        // Move the item
        $('#removedItems').append( $item );
    });
});