在 HTML 中,我有一个基本形式:
let numero = 1;
let nuevo = function() {
numero++;
jQuery('.inputs').append(`<section id="${numero}"><input type="text" name="codigo" placeholder="Ingrese Codigo"><input type="text" name="namearti" placeholder="Ingrese Nombre"><input type="text" name="cantidad" placeholder="Ingrese Cantidad"> <button class="btn-danger" onclick="eliminar(${numero})">Eliminar</button></section>`);
}
let eliminar = function(n) {
jQuery("section").remove(`#${n}`);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form method="post" action="gestionArticulos.php">
<div class="inputs">
<input type="text" name="codigo" placeholder="Ingrese Codigo">
<input type="text" name="namearti" placeholder="Ingrese Nombre Articulo">
<input type="text" name="cantidad" placeholder="Ingrese Cantidad">
<button type="button" onclick="nuevo();">Agregar</button>
</div>
<input type="submit" name="enviar">
</form>
当我提到代码优化时,如果在某些时候我必须修改 HTML 以将 10 个字段插入到表单中,我不必在 jQuery 中重新插入这 10 个字段,而是找到一种更舒适和动态的方式,这样我就不必在 jQuery 追加中“重新插入”相同的 HTML。
如果您想要复制字段
.inputs
而不必在 JavaScript 代码中重复它们,您可以做的是复制代码.inputs
并将其添加到section
后面.inputs
(尽管您添加的代码不一样,因为按钮是不是添加而是删除,您必须更改其功能)。像这样的东西(注释掉):如您所见,此解决方案不依赖生成的 ID 或全局变量来知道要删除哪个部分。您可以使用 jQuery 方法
.closest
返回满足条件的最近祖先。因此,当您单击“删除”按钮时,您只需搜索 a.closest("section")
即可找到包含要删除的字段的部分:通过这些更改,您可以看到它在这里工作: