JSFiddle - React, Tailwind, and code Playground

by Ehsan Sajjad

HTML

<li class="dd-item dd3-item" data-id="22">
    <div class="dd-handle dd3-handle"></div>
    <div class="dd3-content">some other
        <span class="pull-right" style="display: none;">
            <a data-target="#settings_22" data-action="collapse" href="#"><i class="fa fa-pencil"></i></a>
        </span>
    </div>

    <form method="post" action="#" class="menu_settings" style="display: block;">
        <input type="hidden" value="22" name="id">
        <fieldset>

            <div role="toolbar" class="btn-toolbar">
                <div class="btn-group btn-group-sm">
                    <button type="button" data-action="update" class="update btn btn-default"><i class="fa fa-upload"></i> Update</button>
                    <button type="button" data-action="delete" class="delete btn btn-default"><i class="fa fa-trash-o"></i> Trash</button>
                    <button type="button" class="cancel btn btn-default"><i class="fa fa-times"></i> Cancel</button>    
                </div>                                
            </div>
        </fieldset>                        
    </form>
</li>

JavaScript

$('button.update, button.delete').on('click', function(e) {
        e.preventDefault();
       
                    alert('delete');
                    $(this).closest('li').remove();
                

    });