JQuery clone click add more button if i select 前一行日期没有更新，当点击删除最上面的总结果值没有减少时

Question

目前我正在使用 jquery 克隆并使用日期选择器计算从日期到显示在面板顶部的日期。使用我当前的代码，我能够克隆该行并添加两个日期值，但是当我单击删除按钮时，它正在删除克隆的行，但它没有更新示例顶部的总结果标签。

这是我的删除按钮代码：

$(document).on('click', ".btn_less1", function() {
  var len = $('.cloned-row3').length;
  if (len > 1) {
    var RemoveStartDate = $(this).closest(".btn_less1").parent().parent().parent().find('.startDate ').val();
    var RemoveEndDate = $(this).closest(".btn_less1").parent().parent().parent().find('.endDate  ').val();

    if ((RemoveStartDate != '') || (RemoveEndDate != '')) {
      var dateStartArray = RemoveStartDate.split('/'),
        dateEndArray = RemoveEndDate.split('/');
      var fromdate = new Date(dateStartArray[2], dateStartArray[0] - 1, dateStartArray[0]),
        todate = new Date(dateEndArray[2], dateEndArray[0] - 1, dateEndArray[0]);

      var yearsDifference = todate.getFullYear() - fromdate.getFullYear();
      var monthsDifference = (todate.getMonth() + 12 * todate.getFullYear()) - (fromdate.getMonth() + 12 * fromdate.getFullYear());

      var PrevTotalYear = parseInt($("#txt_expy>span").text());
      var PrevTotalMonth = parseInt($("#txt_expm>span").text());


      $("#txt_expy>span").text('');
      $("#txt_expm>span").text('');

      PrevTotalYear = PrevTotalYear * 12;

      var CurTotalYear = Math.floor(((PrevTotalYear + PrevTotalMonth) - monthsDifference) / 12);
      var CurTotalMonth = (monthsDifference - PrevTotalMonth) % 12;


      $("#txt_expy>span").text(CurTotalYear);
      $("#txt_expm>span").text(CurTotalMonth);
      $(this).closest(".btn_less1").parent().parent().parent().remove();
    } else {
      $(this).closest(".btn_less1").parent().parent().parent().remove();
    }
  }
});

当用户选择开始日期为 12/01/2000 和结束日期为 12/01/2003

结果将是总工作经验 3 年 0 个月

如果用户点击添加更多按钮，它将再创建一行

再次从日期 12/01/2004 到日期 12/01/2015

结果将是使用我的代码的总工作经验 15 年 0 个月。这符合我的预期。

当用户单击删除按钮时，它删除了行，但它没有更新总工作经验，如果我单击添加更多按钮，如果我尝试修改以前的开始日期和日期，它不会更新结果要么。

这里是fiddle link

提前致谢

Answer 1

你的问题原来HTML是这样开始的：

<label class="years_lab" id="txt_expy"><span>0</span>Years</label>

更改值时，您可以这样设置值：

document.getElementById("txt_expy").innerHTML

其中设置标签的内部并删除 span 元素。当您尝试重新计算总数时，您 select 是这样的：

$("#txt_expy>span")

但是这个 returns 是一个空的 jQuery 对象，因为跨度不再存在。

Fiddle: http://jsfiddle.net/bqgjro6d/41/

我更改了最后两行：

document.getElementById("txt_expy").innerHTML = diffYears;
document.getElementById("txt_expm").innerHTML = diffMonths;

收件人：

$("#txt_expy>span").text(diffYears);
$("#txt_expm>span").text(diffMonths);

JQuery clone click add more button if i select 前一行日期没有更新，当点击删除最上面的总结果值没有减少时

JQuery clone click add more button if i select the previous row date not updating and when click delete the top total result value was not reducing

javascript

jquery

jquery-ui

jquery-ui-datepicker