remove all field from dynamic add field

Question

I'm working on the following jsfiddle code:

$(function() {
  $("#btnAdd").bind("click", function() {
    var div = $("");
    div.html(GetDynamicTextBox(""));
    $("#TextBoxContainer").append(div);
  });
  $("#btnGet").bind("click", function() {
    var valuesarr = new Array();
    var phonearr = new Array();
    $("input[name=DynamicTextBox]").each(function() {
      valuesarr.push($(this).val());
    });
    $("input[name=phoneNum]").each(function() {
      phonearr.push($(this).val());
    });
    alert(valuesarr);
    alert(phonearr);
  });
  $("body").on("click", ".remove", function() {
    $(this).closest("div").remove();
  });
});

function GetDynamicTextBox(value) {
  return '  ';
}

example

It works perfectly but: I add more then one input field, for example 3 new rows (via add button), then I can remove each line with the "remove button". I would like to "remove all" rows... is it possible with a new button called "remove all" or something similar?

thanks for your help

Layhout · Answer

$(function() {
  $("#btnAdd").bind("click", function() {
    var div = $("");
    div.html(GetDynamicTextBox(""));
    $("#TextBoxContainer").append(div);
  });
  $("#btnGet").bind("click", function() {
    var valuesarr = new Array();
    var phonearr = new Array();
    $("input[name=DynamicTextBox]").each(function() {
      valuesarr.push($(this).val());
    });
    $("input[name=phoneNum]").each(function() {
      phonearr.push($(this).val());
    });
    alert(valuesarr);
    alert(phonearr);
  });
  $("body").on("click", ".remove", function() {
    $(this).closest("div").remove();
  });
  
  // remove all input field(s).
  $("#btnRemoveAll").bind("click", function() {
    $("#TextBoxContainer").empty();
  });
  
});

function GetDynamicTextBox(value) {
  return '  ';
}

remove all field from dynamic add field

1 Answers