javascript - 如何使用 php 将动态创建的表单字段更改为数据库？

Question

我创建了一个管理面板，通过它我可以添加和删除产品类别。它在按下添加按钮时动态添加新字段，并在按下删除按钮时删除该字段。问题是，我在数据库中进行更改时遇到问题。

例如，假设我已经有 2 个类别。我登录到管理面板。现在我的问题是，如何让这两个类别已经显示在那里，以及如何通过单击删除按钮将它们删除？

HTML：

<div id="product_category" class="container tab-pane active">
        <form action="one.php">
          <div class="form-row">
                <div class="product-category col-sm-12 my-2">
                  <div class="card col-sm-12">
                    <div class="card-title"><h3 class="text-center">Categories</h3></div>
                    <div class="card-body">
                      <div id="categories" class="form-group">
                        <button class="btn btn-success btn-block" id="add_cat_btn">Add Category</button>
                        <button class="btn btn-danger btn-block" id="remove_cat_btn">Remove Category</button>
                      </div>
                    </div>
                  </div>
                </div>
            </div>
        </form>
      </div>

查询：

  var cat_count=0;


$(document).on("click","#add_cat_btn",function(e){
    e.preventDefault();
    console.log("clicked");
    cat_count++;
    //$(this).before('<div id="cat'+cat_count+'"><div class="card my-2"><div class="card-body"><input type="text" name="cat_title[]" class="form-control" placeholder="Category Name" required><input type="text" class="form-control" placeholder="content" required><input type="file" class="form-control" required></div></div><button class="btn btn-success my-2">Submit</button></div>');
    $(document).find("#categories #add_cat_btn").before('<div id="cat'+cat_count+'"><div class="card my-2"><div class="card-body"><input type="text" name="cat_title[]" class="form-control" placeholder="Category Name" required><input type="text" class="form-control" placeholder="content" required><input type="file" class="form-control" required></div></div><button class="btn btn-success my-2">Submit</button></div>');

  });

  $('#remove_cat_btn').on("click",function(e){
    e.preventDefault();
    console.log("removed");
    $('#categories').find('#cat'+cat_count).remove();
    cat_count--;
  });

标签： javascriptphpjqueryhtml