jQuery – Add And Remove to list, Generation of Random Text

In the current article I show how to make a simple adder and remover with jQuery to a list and how to generate a randomizator (not a real one, though!) with jQuery.

We have three divs – my_main, my_adder, my_remover and every time we click on one of the first two, we get a result in the last one. As simple as that. In the result we get the possibility to generate a random string with increasing lenght (up to some limits). The random string is achieved through  (Math.random() + 1).toString(36).substr(2,counter); The idea is that a random number is converted to a 36 digit system and taken as string. That is why we have limits in the length. The “+1” is to avoid some possibility of getting a small result.

So, this is how the thing looks like:

And its JS code is here:

$(document).ready(function () {
    var counter = 1;
    $("#my_adder").click(function(){
        var js_random = (Math.random() + 1).toString(36).substr(2,counter);
        counter++;
        $("#my_list").append("<li>"+ js_random +"</li>");
    });
    $("#my_remover").click(function(){
        $("#my_list li:last-child").remove();
        counter--;
    });
});

If you are willing to see the CSS and the HTML – check the GitHub account!

That is all! 😀