Javascript jQuery:删除动态添加的项后重新索引订单

我正在使用项目ID、标签ID动态创建div块。在创建时，它按预期工作

我想要的是：删除第2行后，剩余的项目应按如下方式重新订购：

• 行标签文本应理解为第1行、第2行、第3行、第4行等。。。而不是第1行、第3行、第4行
• 输入值应为输入编号1、输入编号2、输入编号3、输入编号4，而不是输入编号1、输入编号3、输入编号4等
• 移除锚标签ID应为移除项目-1、移除项目-2、移除项目-3、移除项目-4等。。。而不是removeItem-1、removeItem-3、removeItem-4

其中as，在删除后，它未按预期工作。

var计数器=1；
$（“#添加新项”）。单击（函数（）{
$（“行”+计数器+”）。附加到（“#inputContainers”）；
计数器++；
});
jQuery（文档）.on（'单击'，'。删除行'，函数（））{
jQuery（this）.closest（'.input row'）.remove（）；
})

.rp容器{填充：10px 10px 0 10px；背景：f3f3；宽度：500px；边距：20px自动；边框：1px实心#cececece；}
.输入行{填充：5px；边距底部：10px；}
.输入行：第n个子（奇数）{背景色：#efef；}
#输入容器{页边距顶部：15px；}
#删除行{左边距：5px；}
输入[type=“text”]{margin:0 10px；}
#addNewItem{显示：块；文本对齐：右；}

---

如果我正确理解了这个问题，那么您只需要在列出这些行的地方再次调用该方法

jQuery(document).on('click', '.remove-row', function(){
  jQuery(this).closest('.input-row').remove();
  jQuery(this).closest().reload();
})

---

您可以创建一些函数来重置divs元素的值。因此，每当单击

删除行

时，首先将

计数器

递减

1

，以便下次单击添加新时，它将从正确的值开始。然后，调用函数重置值。在此函数中，您可以使用

每个
循环来循环
输入行
，然后使用
。查找
方法来获取需要更改的元素，并使用
.text（）
和
.val（）
向元素添加新值

演示代码：


var计数器=1；
$（“#添加新项”）。单击（函数（）{
$（“行”+计数器+”）。附加到（“#inputContainers”）；
计数器++；
});
jQuery（文档）.on（'单击'，'。删除行'，函数（））{
jQuery（this）.closest（'.input row'）.remove（）；
计数器--；//递减计数器
reset_values（）；//调用此rset values
})
函数重置_值（）{
var计数=1；
//循环遍历所有div
$（“#inputContainers>.input行”）。每个（函数（）{
$（this.find（“span”）.text（count）；//将新计数设置为span
$（this）.find（“input”）.val（“input number”+count）；//设置值
$（this.find（“a.remove-row”）.attr（“id”，“removietem-”+count）；//设置id
计数+++；//递增计数
})
}
.rp容器{
填充：10px 10px 0 10px；
背景：F3；
宽度：500px；
保证金：20px自动；
边框：1px实心#cecece；
}
.输入行{
填充物：5px；
边缘底部：10px；
}
.输入行：第n个子项（奇数）{
背景色：#EFEF；
}
#输入容器{
边缘顶部：15px；
}
#删除行{
左边距：5px；
}
输入[type=“text”]{
利润率：0.10px；
}
#addNewItem{
显示：块；
文本对齐：右对齐；
}
您不需要任何计数器。只需动态重新排列数字，如下所示：


$（“#添加新项”）。单击（函数（）{
$（'Row'+（$（'.input Row'）。长度+1）+''。追加到（'#inputContainers'）；
});
jQuery（文档）.on（'单击'，'。删除行'，函数（））{
jQuery（this）.closest（'.input row'）.remove（）；
$（'.input row'）。每个（函数（i）{
$（this.find（'span'）.html（'Row'+（i+1））；
$（this.find（'input'）.val（'input number'+（i+1））；
$（this.find（'a'）.attr（'id'，'removietem-'+（i+1））；
});
})
.rp容器{填充：10px 10px 0 10px；背景：f3f3；宽度：500px；边距：20px自动；边框：1px实心#cececece；}
.输入行{填充：5px；边距底部：10px；}
.输入行：第n个子（奇数）{背景色：#efef；}
#输入容器{页边距顶部：15px；}
#删除行{左边距：5px；}
输入[type=“text”]{margin:0 10px；}
#addNewItem{显示：块；文本对齐：右；}
您只需在添加和删除行时使用一个重新编号功能即可。这将使中心函数中的所有内容都正确编号，并且您不需要像现在这样在创建新行时手动复制此作业

$("#addNewItem").click(function() {
    $('<div class="input-row"><span></span> <input type="text"><a href="javascript:;" class="remove-row">Remove</a></div>').appendTo('#inputContainers');
    renumberRows();
});

$('#inputContainers').on('click', '.remove-row', function() {
    $(this).closest('.input-row').remove();
    renumberRows();
})

function renumberRows() {
    let n;
    $('#inputContainers .input-row').each(function(i) {
        n = i + 1;
        $(this).find('span').text('Row ' + n);
        $(this).find('input').attr('placeholder', 'Input number ' + n);
        $(this).find('a').attr('id', 'remoteItem-' + n);
    })
}

$（“#添加新项”）。单击（函数（）{
$（“”）.appendTo（“#inputContainers”）；
重新编号行（）；
});
$（“#inputContainers”）。在（'单击'，'上。删除行'，函数（）{
$（this）.closest（'.input row'）.remove（）；
重新编号行（）；
})
函数重新编号行（）{
让n；
$（'#inputContainers.input行'）。每个（函数（i）{
n=i+1；
$（this）.find（'span'）.text（'Row'+n）；
$（this）.find（'input'）.attr（'placeholder'，'input number'+n）；
$（this.find（'a'）.attr（'id'，'remoteItem-'+n）；
})
}

我还建议您在输入上使用
占位符
属性，因为使用这里的所有解决方案，您的输入值将在每次更改行时被覆盖。使用占位符，您可以为用户提供提示，但不会干扰用户在输入字段中实际输入的内容

@parmer harsh，谢谢你的回答。但它不起作用。重新加载时获取错误不是functionjQuery（this.reload（）；或者可以使用此$（'.要重新加载的元素名称'）。要重新加载的元素名称（）；事实上，我想重新排序的所有元素标签像上面提到的我的问题和参考图像。PS:reload（）函数不起作用我和你面临着同样的问题。我正在carousal中创建图像块，删除图像块后它将不会刷新。但是下面的解决方案对我有效，你需要做一些更改