Jquery dynamic add remove input

by Chance Nursey-Bush

HTML

Set Max Here:<input type="number" id="maxFields" value="6" min="1">
<div id="outerDiv">
  <div class="innerDiv">
    <input type="text" size="20" name="myInput" value="" placeholder="Input Value 1" /><button name="removeInput" onclick="removeInput(this)">Remove</button>
  </div>
</div>
<button name="addInput">Add</button><button id="calcDivLength">Length</button>
<script>
  function removeInput(button) {
  	 $(button).parent().remove();
  }
</script>

JavaScript

function divLength(){
  	alert('Length of div: ' + $("#outerDiv > div").length);
	}
  function addInput() {
    var max = document.getElementById("maxFields").value;
    //alert(max);
    var divChildren = $("#outerDiv > div").length;

    if (divChildren >= max) {
      return;
    }

    var x = [];
    x[x.length] = $('#outerDiv').html();
    x[x.length] = '<div class="innerDiv"><input type="text" size="20" name="myInput" value="" placeholder="Input Value '+ (divChildren+1) +'" /><button name="removeInput" onclick="removeInput(this)">Remove</button></div>';
    $('#outerDiv').html(x.join(""));
  }

  function removeInput(button) {
  	 $(button).parent().remove();
  }
$(function() {
  $('button[name="addInput"]').click(addInput);
  $('#calcDivLength').click(divLength);
  });