JSFiddle - React, Tailwind, and code Playground

by lonewolfs

HTML

<input id="delete" type="button" value="Delete"/>
<div class="row">
    <input type="checkbox" id="ch1"/><div id="msg1">This is message one</div>
</div>
<div class="row">
    <input type="checkbox" id="ch2"/><div id="msg2">This is message two</div>
</div>
<div class="row">
    <input type="checkbox" id="ch3"/><div id="msg3">This is message three</div>
</div>
<div class="row">
    <input type="checkbox" id="ch4"/><div id="msg4">This is message four</div>
</div>

CSS

div{
    border:thin solid #F00;
    padding:3px;
    width:300px;
    margin:auto;
}
input,div{
    display:inline-block;
}
.row{
    display:block;
    width:500px;
}

JavaScript

$('#delete').live('click',function(){
    //storing id's to fire in database ill output on body
    var checkboxes = $('input[type="checkbox"]:checked');
    $.each(checkboxes,function(index,value){  
        $('body').append('<br/>ID: '  + $(this).next('div').attr('id') +' : '+ $(this).next('div').text() + '=> Was removed'); 
    });
    
    $('input[type=checkbox]:checked').parent().hide(300,function(){
        $('input[type=checkbox]:checked').parent().remove();
    });
});