JSFiddle - React, Tailwind, and code Playground

HTML

<div class="panel-body">
                                <div class="dd" id="nestable">
                                    <ol class="dd-list" id="category-list">
                                        <li class="dd-item" data-id="3">
                                            <div class="dd-handle" >
                                                <span contentEditable="true">Item 3</span>
                                                <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                                            </div>
                                        </li>
                                    </ol>
                                </div>
                            </div>

CSS

.dd {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
/*    list-style: none;*/
    font-size: 13px;
    line-height: 20px;
}

.dd-list {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    list-style-type: decimal;
/*    list-style: none;*/
}

.dd-item, .dd-empty, .dd-placeholder {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    min-height: 20px;
    font-size: 13px;
    line-height: 20px;
}

.dd-handle {
    display: block;
    height: 34px;
    margin: 5px 0;
    padding: 6px 10px;
    color: #333;
    text-decoration: none;
    font-weight: 600;
    border: 1px solid #CCC;
    background: white;
    /*    background: #F6F6F6;*/
    -webkit-border-radius: 3px;
    border-radius: 3px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

JavaScript

$(document).ready(function(){

 $("#category-list").on( "click", ".close", function( event ) {
      $(this).parent().parent().remove();
   });  

});