javascript - 输入字段自动显示在具有添加/删除功能的文本区域

Question

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

其次是统计有多少个反射(reflect)到上面的“ child 的数量”输入框

这是我的 FIDDLE 以使其更清晰 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);
  }

});

这是我的 FIDDLE 以使其更清晰 https://jsfiddle.net/sjgrLcqx/12/

Answer 1

删除时，更新的是 View ，而不是用于设置文本数组控件值的数组。你的删除应该做这样的事情(原谅我的 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);

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