jQuery Add/Remove Input Fields

A script that uses event delegation and the .live() method for adding and deleting extra input form fields.

by vijayweb

HTML

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

    <link href="https://www.jquery-az.com/boots/css/bootstrap-colorpicker/bootstrap-colorpicker.css" rel="stylesheet">
    <script src="https://www.jquery-az.com/boots/js/bootstrap-colorpicker/bootstrap-colorpicker.js"></script>


<h2><a href="#" id="addText">Add Another Input Box</a></h2>

<div id="textBoxes" class=''>

</div>


<div id='canvas'>

</div>

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

#canvas{
  width:400px;
  height:400px;
}


.input-large {
  width: 210px;
  height: 44px !important;
  margin-bottom: 10px !important;
  line-height: 30px !important;
  padding: 11px 19px !important;
  font-size: 17.5px !important;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
}

.input-large[class=input-large] {
    width: 400px;
}

.color-picker-rgb{
  float:left;
}

JavaScript

$(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents p').size() + 1;



    $("#addText").click(function() {
        $('<div class="text_' + i + '_text"><input class="input-large" type="text" id="p_scnt" size="20" name="text_' + i + '" value="" placeholder="Enter Text Here" /> <a href="#" name="text_' + i + '" class="btn btn-default color-picker">Text Color</a>  <a href="#" name="text_' + i + '" class="btn btn-default color-picker2">Text Stroke</a> <p class="font-size-label">Font Size</p><button name="text_' + i + '" class="up">+</button><p class="text_' + i + '_updown font-size">0</p><button name="text_' + i + '" class="down">-</button><a href="#" name="text_' + i + '" id="remX">X</a></div>').appendTo(textBoxes);

        $('#canvas').append('<div style="font-size:140px" class="text_' + i + '_title"></div>');
        colorBox();
        i++;
        return false;
    });


});



$(document).on("keyup", "input", function() {
    var idVal = $(this).attr('name') + '_title';


    $('.' + idVal).html($(this).val());
});

$(document).on("click", "#remX", function() {
    var remVal = $(this).attr('name');

    console.log(remVal);
    $('.' + remVal + '_text').remove();
    $('.' + remVal + '_title').remove();
});


$(document).on("change", "#fontSize", function() {
    var fontSize = $(this).val();
    console.log(fontSize);

    var titleDiv = $(this).attr('name') + '_title';
    console.log(titleDiv);
    $('.' + titleDiv)[0].css("font-size", "32px");



});




function colorBox() {



    $('.color-picker').colorpicker({
        customClass: 'custom-size',
        color: '#05FF44',
        format: 'rgba',
        sliders: {
            saturation: {
                maxLeft: 250,
                maxTop: 250
            },
            hue: {
                maxTop: 250
            },
            alpha: {
                maxTop: 250
            }
        }
    }).on('changeColor', function(e) {

        var titleDiv = $(this).attr('name') +...