JSFiddle - React, Tailwind, and code Playground

by Teuta Koraqi

HTML

<button id="btn">Add more elements on list</button>
    <div class="pikachoose">
        <ul id="pikame" class="jcarousel-skin-pika">
            <li><a href="http://www.pikachoose.com"><img src="../../10.jpg"/></a> <a class="remove" href="#">Remove List</a></li>
            <li><a href="http://www.pikachoose.com"><img src="../../20.jpg"/></a> <a class="remove" href="#">Remove List</a></li>
            <li><a href="http://www.pikachoose.com"><img src="../../30.jpg"/></a> <a class="remove" href="#">Remove List</a></li>
            <li><a href="http://www.pikachoose.com"><img src="../../40.jpg"/></a> <a class="remove" href="#">Remove List</a></li>
            <li><a href="http://www.pikachoose.com"><img src="../../50.jpg"/></a>
            <a class="remove" href="#">Remove List</a>
            </li>
        </ul>
    </div>
      <div id="text"></div>

JavaScript

$(function(){

    $('a:not(.remove)').live("click", function(){
      var listLenght =  $(this).parents(".pikachoose").find("li").length;
      alert(listLenght);
    });
    $("#btn").click(function(){
    debugger;
       var htmlToAppend = $('<li><a href="http://www.pikachoose.com"><img src="../../10.jpg"/></a><a href="#" class="remove">Remove List</a></li>');
       var parentsList = $(this).next().find("#pikame");
       var listL = $(this).next().find(".jcarousel-skin-pika li").length;
       $("#text").html(listL);
       htmlToAppend.appendTo(parentsList);
    })
    $(".remove").live("click", function(e){
    debugger;
    e.preventDefault();
      $(this).parent().remove();
      debugger;
      var listLengthjk = $(this).offsetParent().find("li").length;
      var btnELM = $(this).offsetParent().find("button").html();
      alert(btnELM);
      $("#text").html(listLengthjk);
    })
    
});