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;
}


  p { display: inline-block; }
  .font-size-label { margin-right: 20px; }
  #font-size { margin: 0 5px; }
  button { 
    width: 30px;
    height: 30px;
  }




/*fonts*/

@import url('https://fonts.googleapis.com/css?family=Pacifico|VT323|Quicksand|Inconsolata');

canvas {
    border: 1px solid #999;
}


@font-face {font-family: 'Cursive1';
src: url('https://static1.squarespace.com/static/5e80e07acc76e2321552d6bf/t/5ed43b4c30af07074f877b16/1590967117048/magnolia_sky.ttf');}

@font-face {font-family: 'Cursive2';
src: url('https://static1.squarespace.com/static/5e80e07acc76e2321552d6bf/t/5edaa1f25f949f032022f042/1591386610355/FontsFree-Net-Grafolita-Script-W01-Medium.ttf');
}

@font-face {font-family: 'Cursive3';
src: url('https://static1.squarespace.com/static/5e80e07acc76e2321552d6bf/t/5ed45be86472ff777abb0eea/1590975465109/Albret.ttf');}

@font-face {font-family: 'Cursive4';
src: url('https://static1.squarespace.com/static/5e80e07acc76e2321552d6bf/t/5ed45de43ae6e43edd8a1bbd/1590975972553/Belinda+Script+copy.otf');}

@font-face {font-family: 'Cursive5';
src: url('https://static1.squarespace.com/static/5e80e07acc76e2321552d6bf/t/5ed45ea7123e6107725ca58d/1590976167836/cursive5.ttf');}

@font-face {font-family: 'Cursive6';
src:...

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" /> <select id="font-family" name="fonts"></select><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();
        fonts();
        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");



}).change();

   
    
    /*fonts*/
    


function colorBox() {



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