JSFiddle - React, Tailwind, and code Playground

by Lucille Kenney

HTML

<ul class="retire">
    <li>
        <label><input type="radio" name="list" value="volvo">Volvo</label>
        <button>delete</button>
    </li>
    <li>
        <label><input type="radio" name="list" value="saab">Saab</label>
        <button>delete</button>
    </li>
    <li>
        <label><input type="radio" name="list" value="mercedes">Mercedes</label>
        <button>delete</button>
    </li>
    <li>
        <label><input type="radio" name="list" value="mercedes">Mercedes</label>
        <button>delete</button>
    </li>
</ul>

CSS

ul {
    padding: 0;
    margin: 0;
    dislay: table;
    border-spacing: .3em;
}
li {
    list-style: none;
    display: table-row;
}
label, button {
    display: table-cell;
}
button {
    border: 2px outset #aaa;
    border-radius: 4px;
}

JavaScript

$(".retire").on("click", "button", function(e) {
    e.preventDefault();
    $(this).parent().remove();
});