Question

当我单击“删除此部分”时，需要有关删除文本区域上的项目的帮助，当前它不仅仅删除输入字段

第二个方法是计算有多少个孩子，并将其反映到上方的“孩子数”输入字段中

这里是我的名字，以使其更加清晰https://jsfiddle.net/sjgrLcqx/12/

这是我现在使用的代码

jQuery(document).ready(function () {

  var childInfoArray = [];

  var formHtml = '<div class="optionBox"><div class="block added"><input class="crow fullName" type="text" placeholder="Full name"><input class="crow width50 marginsmall age" type="text" placeholder="Age"><input class="crow width50 nomargin gender" type="text" placeholder="gender"><input class="crow interest" type="text" placeholder="Interest"><span class="remove">Remove this section</span></div><div class="block"><span class="add">Add another child\'s info</span></div></div>';

  var formHtml2 = '<div class="block added"><input class="crow fullName" type="text" placeholder="Full name"><input class="crow width50 marginsmall age" type="text" placeholder="Age"><input class="crow width50 nomargin gender" type="text" placeholder="gender"><input class="crow interest" type="text" placeholder="Interest"><span class="remove">Remove this section</span></div>';  

  jQuery('#frmPaymentSantasgrotto').append(formHtml);

  jQuery('.add').click(function () {
    jQuery('.block:last').before(formHtml2);
  });


  jQuery('.optionBox').on('click', '.remove', function () {
    jQuery(this).parent().remove();
  });


  jQuery('.optionBox').on('keyup', 'input', function () {

    var index = $(this).parent().index('div.block');

    var child = {};

    if (childInfoArray[index] != null) {
      child = childInfoArray[index];
    }
    else {
      child = {
        fullName: '',
        age: '',
        gender: '',
        interest: ''
      }
    }

    if ($(this).hasClass('fullName')) {
      child.fullName = jQuery(this).val();
    }
    else if ($(this).hasClass('age')) {
      child.age = jQuery(this).val();
    }
    else if ($(this).hasClass('gender')) {
      child.gender = jQuery(this).val();
    }
    else if ($(this).hasClass('interest')) {
      child.interest = jQuery(this).val();
    }
    childInfoArray[index] = child;
    printChildArray();

  });

  function printChildArray() {
    var childInfoString = "";
    childInfoArray.forEach(child => {
      Object.values(child).forEach((attribute, index) => {
        childInfoString += attribute;
        if (index !== Object.keys(child).length - 1) {
          childInfoString += ' | ';
        }
        else {
          childInfoString += ' \n';
        }
      });
    });
    $('textarea').html(childInfoString);
  }

});

这里是我的名字，以使其更加清晰https://jsfiddle.net/sjgrLcqx/12/

Answer 1

删除时，将更新视图，但不更新用于设置文本数组控件值的数组。您的删除操作应如下所示（请原谅我的JS。TypeScript和Angular毁了我）：

    jQuery('.optionBox').on('click', '.remove', function () {

      // get the index of the item to remove
      var index = $(this).parent().index('div.block');

      // remove it from the array
      childInfoArray.splice(index,1);

      // remove from view
      jQuery(this).parent().remove();

      // call your refresher function to update the textarray
      printChildArray();
    });

此外，在printChildArray（）函数中添加一行以更新计数：

$('#qppquantitySantasgrotto').val(childInfoArray.length);

这应该可以解决您的两个问题。

Answer 2

这似乎有效.....

jQuery(document).ready(function () {

  var childInfoArray = [];

  var formHtml = '<div class="optionBox"><div class="block" style=""><input class="crow fullName" type="text" placeholder="Full name"><input class="crow width50 marginsmall age" type="text" placeholder="Age"><input class="crow width50 nomargin gender" type="text" placeholder="gender"><input class="crow interest" type="text" placeholder="Interest"><span class="remove">Remove this section</span></div><div class="block"><span class="add">Add another child\'s info</span></div></div>';

  var formHtml2 = '<div class="block" style=""><input class="crow fullName" type="text" placeholder="Full name"><input class="crow width50 marginsmall age" type="text" placeholder="Age"><input class="crow width50 nomargin gender" type="text" placeholder="gender"><input class="crow interest" type="text" placeholder="Interest"><span class="remove">Remove this section</span></div>';  

  jQuery('#frmPaymentSantasgrotto').append(formHtml);

  jQuery('.add').click(function () {
  jQuery('.block:last').before(formHtml2);

});

jQuery(".optionBox").each(function(i) {
   jQuery(this).addClass("list" + ++i);
});

jQuery('.optionBox').on('click', '.remove', function () {
  var index = $(this).parent().index('div.block'); 
  jQuery(this).parent().remove();
  childInfoArray.splice( $.inArray(index, childInfoArray), 1 );
  printChildArray() 
});

jQuery('.optionBox').on('keyup', 'input', function () {

  var index = $(this).parent().index('div.block');

  var child = {};

  if (childInfoArray[index] != null) {
    child = childInfoArray[index];
  }
  else {
    child = {
      fullName: '',
      age: '',
      gender: '',
      interest: ''
    }
  }

  if ($(this).hasClass('fullName')) {
    child.fullName = jQuery(this).val();
  }
  else if ($(this).hasClass('age')) {
   child.age = jQuery(this).val();
  }
  else if ($(this).hasClass('gender')) {
    child.gender = jQuery(this).val();
  }
  else if ($(this).hasClass('interest')) {
    child.interest = jQuery(this).val();
  }
  childInfoArray[index] = child;
  printChildArray();

});

function printChildArray() {
  var childInfoString = "";
  childInfoArray.forEach(child => {
    Object.values(child).forEach((attribute, index) => {
      childInfoString += attribute;
      if (index !== Object.keys(child).length - 1) {
        childInfoString += ' | ';
      }
      else {
        childInfoString += ' \n';
      }
    });
  });
  $('textarea').html(childInfoString);
  $('#qppquantitySantasgrotto').val(childInfoArray.length);
 }

});

输入字段通过添加/删除功能自动显示在文本区域上

2 个答案: