JSFiddle - React, Tailwind, and code Playground

by orchid1

HTML

<ul>
<li>Somehting</li>
<li>Else</li>
<li>Other</li>
</ul>
<button class="minus">Remove the line items</button>
<button class="add">Add Line Items</button>

JavaScript

jQuery().ready(function($) {

    //attach event that removes the line items when clicked
    $('.minus').click(function() {
        $('li').remove();
    });

    //add line items when the ad button is cliked
    $('.add').click(function() {
        var li = $('<li>Another Line Item</li>');
        attachClickEvent(li);
        $('ul').append(li);
    });


    //attach the click event to the line items that are on the page when the page loads    

    function attachClickEvent(elem) {
        if (arguments.length === 0) {
            elem = $('li');
        }

        elem.click(function() {
            //do somehting
            alert('a line item has been clicked');
        });
    }
    attachClickEvent();

});