我有一个表单，您可以在其中动态添加和删除字段（这是使用 javascript 完成的）。用户可以创建销售并将产品添加到销售中，保存信息并在以后根据需要进行编辑。每个产品都有几个字段，如 id（隐藏）、名称、折扣等，您可以在表单中添加和删除产品。因为可以动态添加和删除字段，所以我遇到了一个问题，如果用户正在编辑表单并删除现有产品，我如何获取已删除产品的 ID 以便从数据库中删除它们。如何将此信息与表格的其余部分一起发布？最好的方法是什么？
顺便说一句，我正在使用 PHP、HTML 和 javascript。
【问题讨论】：
标签： javascript php jquery html forms
对于动态的东西，我通常使用 JSON。
用他们添加、删除、更改等的任何内容在 javascript 中构建一个 json 对象，然后发送它而不是所有隐藏的输入。
更好的方法是捕获用户正在执行的操作，并在发生时通过 ajax 发送，而不是批量发送。然后，您不必在浏览器中维护表单中已更改内容的状态。如果用户删除了一个项目，您会发出一个 ajax 调用，说明他们正在删除该项目 ID。
【讨论】：
有很多“视情况而定”，但我可以举一个例子。
假设您有一行如下所示的字段：
<input name="part-number1" id="part-number1">
<input name="qty1" id="name="qty1">
<button id="delete-button1">Remove this item</button>
如果您愿意，您可以解析按钮的 ID 并尝试提取行号。然而，这很困难并且容易出错。有一个更简单的方法：
删除此项目
然后，在您的 Javascript 中，您可以简单地执行以下操作来附加事件侦听器：
// Note the use of event delegation here so we can add and remove rows without
// breaking the listener
$(window).on("button", "[data-row-idx]", function() {
var id = $(this).getAttribute("data-row-idx");
// Now you can use the 'id' to remove the elements from the screen
// Or make an Ajax call.
});
为了解决问题，您可以创建该按钮并设置属性：
var $button = $("<button />").setAttribute("data-row-idx", 10);
并根据需要将其附加到您的文档中。
【讨论】：
用户如何移除产品？通过点击可能是button 或icon。
如果是这样，应该很容易。
code 监听click 事件并应用style display:none 或删除node； parentNode.removeChild(node) 可以很容易地得到相应的细节，很可能是从与node 关联的data-attributes 中删除。
换句话说，这是一种two way data binding。最好的方法是将接口视为JavaScript object 并具有1-1 映射。当对象被修改时，更新界面，反之亦然。
【讨论】：