用Jquery更新HTML附加项

Question

我想创建更新的Jquery附加的HTML项目...

添加的项目获得增加的变量x并用于HTML属性name，当一项被删除而另一项被添加时……如您所见，已经输出的较旧项目保持不变具有相同的ID并创建重复项...

如何删除物品ID（如果已删除）以保持正确的时间顺序？

这里是the fiddle

$(document).ready(function() {
  var max_fields = 3; //maximum input boxes allowed
  var wrapper = $(".wrap"); //Fields wrapper
  var add_button = $(".add"); //Add button ID

  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      $(wrapper).append('<div><input type="text" name="' + x + '" placeholder="#' + x + '"/><a href="#" class="remove">X</a></div>'); //add input box
    }
  });

  $(wrapper).on("click", ".remove", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="wrap">
  <button class="add">Add</button>
  <div><input type="text" name="1" placeholder="#1"></div>
</div>

Answer 1

这里是如何重新编号

请注意，我使用输入的数量进行计数。

我也只更改占位符，而不更改字段内容（如果有）。

function reNum() {
  $(".inp").each(function(i) {
    this.name = (i + 1)
    $(this).attr("placeholder", "#" + (i + 1));
  })
}

$(document).ready(function() {
  var max_fields = 3; //maximum input boxes allowed
  var $wrapper = $(".wrap"); //Fields wrapper
  $(".add").click(function(e) { //on add input button click
    e.preventDefault();
    var x = $(".inp").length;
    if (x >= max_fields) return;
    x++;
    $wrapper.append('<div><input class="inp" type="text" name="' + x + '" placeholder="#' + x + '"/><a href="#" class="remove">X</a></div>');
  });

  $wrapper.on("click", ".remove", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    reNum();
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="wrap">
  <button class="add">Add</button>
  <div><input class="inp" type="text" name="1" placeholder="#1"></div>
</div>

Answer 2

尝试一下

from django.views.generic import ListView
from django.shortcuts import render


from .models import Product


class ProductListView(ListView):
    queryset = Product.objects.all()
    template_name="products/list.html"



def product_list_view(request):
    queryset=Product.objects.all()
    context={
    'qs':queryset
    }
    return render(request,"products/list.html", context)

$(document).ready(function() {
  var max_fields = 5; //maximum input boxes allowed
  var wrapper = $(".wrap"); //Fields wrapper
  var add_button = $(".add"); //Add button ID

  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      $(wrapper).append('<div class="txt"><input type="text" name="' + x + '" placeholder="#' + x + '"/><a href="#" class="remove">X</a></div>'); //add input box
    }
  });

  $(wrapper).on("click", ".remove", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
    var count = $('.txt').length;
    $('.txt').remove();
    for (var i = 1; i <= count; i++) {
      var template = '<div class="txt"><input type="text" name="' + i + '" placeholder="#' + i + '"/>'
      if (i > 1)
        template += '<a href="#" value=' + i + ' class="remove">X</a>'
      template += '</div>'
      $(wrapper).append(template);
    }
  })
});