如何在删除 div 输入字段 ID 时重新启动克隆它

Question

我有一个div，在该div中我有两个输入字段，如下所示：

<button type = "button" id = "add-botton" >Add Element </button>
<div id = "trace-div1" class = "trace">
<h4><span>Trace 1</span></h4>
<form>
<table>
<tbody>
<tr>
<td><label>X Axis:  </label></td>
<td><input type="text" name="t_x_axis" class = 
"t_x_axis" id="x_axis_t1" size="50"></td>                                              
</tr>                                                                             
<tr>
<td><label>Y Axis:  </label></td>
<td><input type="text" name="t_y_axis" class ="t_y_axis" 
id="y_axis_t1" size="50"></td>
<td><button type = "button" name = "update-button-trace" 
class= "update-trace" id = "update-botton-trace1" 
onclick="updatebtn(this)">Update </button></td>
<button type = "button" name = "delete-button-trace" class="delete-trace" id = "delete-button-trace1" onclick="deletebtn(this)">Delete </button></td>
</tr>
</tbody>
</table>
</form>    
</div>

我像这样克隆：

$(document).ready(function(){
$('#add-botton').click(function(){
var $div = $('div[id^="trace-div"]:last');
var num = parseInt( $div.prop("id").match(/d+/g), 10 ) +1;
var $trace1div = $div.clone(true).prop('id', 'trace-div'+num );
$trace1div.find('span').text('Trace ' + num);
$trace1div.find("input[name='t_x_axis']").attr("id", 
"x_axis_t"+num).val("");
$trace1div.find("input[name='t_y_axis']").attr("id", 
"y_axis_t"+num).val("");
$trace1div.find("button[name='update-button-trace']").attr("id", 
"update-button-trace"+num);
$trace1div.find("button[name='delete-button-trace']").attr("id", 
"delete-button-trace"+num);
$div.after( $trace1div);  
});
});

在上面的代码中，当单击"添加元素"按钮时，它是克隆的，这意味着它为每个输入提供了多个具有不同 ID 的输入字段，因为删除按钮也带有 diff.Id。

我的查询是当我通过单击添加元素按钮单击来添加一些输入字段时。

假设如果我使用添加元素按钮添加 3 个div，那么如果我想使用删除按钮删除第 2 个div，该按钮特定的第 2 个div(两个输入字段(，它将被删除，那么下面的div3 不会改变，我需要更改div3 变成div2，当我删除div2 时。

如果我删除div6 在div7 下面变成div6，它不应该再像div7 一样。

谢谢

Answer 1

有点像当你添加一个元素时，当你删除一个元素时，你只是遍历所有元素。

function deletebtn(obj) {
$(obj).closest(".trace").remove();
cleanIds();
};
function cleanIds() {
$(".trace").each(function(i,x) {
$(this).attr("id", "trace-div" + (i+1));
$("h4 span",this).text("Trace " + (i+1));
$(this).find("input[name='t_x_axis']").attr("id",
"x_axis_t" + (i+1));
$(this).find("input[name='t_y_axis']").attr("id",
"y_axis_t" + (i+1));
$(this).find("button[name='update-button-trace']").attr("id",
"update-button-trace" + (i+1));
$(this).find("button[name='delete-button-trace']").attr("id",
"delete-button-trace" + (i+1));
});
};

演示

$(document).ready(function() {
$('#add-botton').click(function() {
var $div = $('div[id^="trace-div"]:last');
var num = parseInt($div.prop("id").match(/d+/g), 10) + 1;
var $trace1div = $div.clone(true).prop('id', 'trace-div' + num);
$trace1div.find('span').text('Trace ' + num);
$trace1div.find("input[name='t_x_axis']").attr("id",
"x_axis_t" + num).val("");
$trace1div.find("input[name='t_y_axis']").attr("id",
"y_axis_t" + num).val("");
$trace1div.find("button[name='update-button-trace']").attr("id",
"update-button-trace" + num);
$trace1div.find("button[name='delete-button-trace']").attr("id",
"delete-button-trace" + num);
$div.after($trace1div);
});
});
function deletebtn(obj) {
$(obj).closest(".trace").remove();
cleanIds();
};
function cleanIds() {
$(".trace").each(function(i,x) {
$(this).attr("id", "trace-div" + (i+1));
$("h4 span",this).text("Trace " + (i+1));
$(this).find("input[name='t_x_axis']").attr("id",
"x_axis_t" + (i+1));
$(this).find("input[name='t_y_axis']").attr("id",
"y_axis_t" + (i+1));
$(this).find("button[name='update-button-trace']").attr("id",
"update-button-trace" + (i+1));
$(this).find("button[name='delete-button-trace']").attr("id",
"delete-button-trace" + (i+1));
});
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="add-botton">Add Element </button>
<div id="trace-div1" class="trace">
<h4><span>Trace 1</span></h4>
<form>
<table>
<tbody>
<tr>
<td><label>X Axis:  </label></td>
<td><input type="text" name="t_x_axis" class="t_x_axis" id="x_axis_t1" size="50"></td>
</tr>
<tr>
<td><label>Y Axis:  </label></td>
<td><input type="text" name="t_y_axis" class="t_y_axis" id="y_axis_t1" size="50"></td>
<td><button type="button" name="update-button-trace" class="update-trace" id="update-botton-trace1" onclick="updatebtn(this)">Update </button></td>
<button type="button" name="delete-button-trace" class="delete-trace" id="delete-button-trace1" onclick="deletebtn(this)">Delete </button></td>
</tr>
</tbody>
</table>
</form>
</div>