JSFiddle - React, Tailwind, and code Playground

by verashn

HTML

<html>
<head>
    <title>Test removal</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
    <script type="text/javascript" src="js/app.js">
    </script>
</head>
<body>
<ul id="removable">
    <li class="one">one</li>
    <li class="two">two</li>
    <li class="three">three</li>
</ul>
<button id="delete">Delete</button>
<p class="console"></p>
</body>
</html>

JavaScript

jQuery(document).ready(function($) {
    // Stuff to do as soon as the DOM is ready. Use $() w/o colliding with other libs;
    $("#delete").click(function() {
        deleteNode($("ul :first-child"));
    });
});

function deleteNode(nodeToDel) {
    nodeToDel.slideUp(function() {
        if (nodeToDel.next().length) {
            deleteNode(nodeToDel.next());
        }
        nodeToDel.remove();
    });
}