JSFiddle - React, Tailwind, and code Playground

by oshirowanen

HTML

<div class="container" id="container_1">
    <span class="item" id="item_1">item one</span>
    <span class="icon" id="icon_1">
        <input type="button" value="button" id="button_1" />
    </span>
</div>

<div class="container" id="container_2">
    <span class="item" id="item_2">item two</span>
    <span class="icon" id="icon_2">
        <input type="button" value="button" id="button_2" />
    </span>
</div>

<div class="container" id="container_3">
    <span class="item" id="item_3">item three</span>
    <span class="icon" id="icon_3">
        <input type="button" value="button" id="button_3" />
    </span>
</div>

<div class="container" id="container_4">
    <span class="item" id="item_4">item four</span>
    <span class="icon" id="icon_4">
        <input type="button" value="button" id="button_4" />
    </span>
</div>

<div class="container" id="container_5">
    <span class="item" id="item_5">item five</span>
    <span class="icon" id="icon_5">
        <input type="button" value="button" id="button_5" />
    </span>
</div>

CSS

.icon { display:none; }

.container:hover { background-color:silver; }

.container:hover .icon { float:right; display:inline; }

JavaScript

/* Delete button per list item */

$(function() {
    $(':button').click(function() {
        $(this).closest('.container').slideUp('slow', function() {
            $(this).remove();
        });
    });
});