Question

我使用append（）在div中添加子元素，并在每次添加项目时使用++来+1计数/添加数字。

如果项目被删除，我希望值自动调整，例如，如果我有4个元素：

元素＃1
元素＃2
元素＃3
元素＃4

目前，如果删除元素＃3，则列表如下所示：

元素＃1
元素＃2
元素＃4

但我希望它看起来像这样：

元素＃1
元素＃2
元素＃3

感谢有关我应该用什么来做到这一点的任何建议，谢谢。

示例代码：https://jsfiddle.net/wepsrzkm/

var price_rule_html = '<button class="remove_price_rule button" type="button">Remove Element</button>';
var price_rule_count = 1;

var price_rule_count = jQuery(".price_rule_area_1").children().length;

jQuery('.add_price_rule').click(function () {

price_rule_count++;
jQuery('.price_rule_area_1').append('<div class="price_rule_wrapper"><div class="price_rule_count">Element #<span>' + price_rule_count + '</span></div>' + price_rule_html + '</div>');

jQuery(".remove_price_rule").click(function() {
    jQuery(this).parents('.price_rule_wrapper').remove();   
});

});

Answer 1

您正在为每个删除元素绑定多个事件处理程序

var price_rule_html = '<button class="remove_price_rule button" type="button">Remove Element</button>';
var price_rule_count = 1;
var price_rule_count = jQuery(".price_rule_area_1").children().length;

jQuery('.add_price_rule').click(function() {
  price_rule_count++;
  jQuery('.price_rule_area_1').append('<div class="price_rule_wrapper"><div class="price_rule_count">Element #<span>' + price_rule_count + '</span></div>' + price_rule_html + '</div>');
});

$('div.price_rule_area_1').on('click', '.remove_price_rule', function() {
  // event handler for dynamically generated element
  jQuery(this).parents('.price_rule_wrapper')
    .nextAll('div')
    // get all div after the removing div
    .find('span')
    // get number span inside it
    .html(function(i, v) {
      return parseInt(v) - 1;
    })
    // decrementing value of it
    .end().end()
    // get back to the removing div
    .remove();
  // removing the div
  price_rule_count--;
  //  decrementing the count by 1 after removing the element
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="price_rule_area_1"></div>
<button class="button-primary add_price_rule" type="button">Add Element</button>

Answer 2

删除时将price_rule_count减少1。
删除一个元素后，更改现有元素#number。更新：从Arun P Johny的答案开始，我们不需要遍历所有左侧元素，只需要更改删除后的文本之后的那些元素。
每次添加项目时，原始代码都会向.remove_price_rule注册多个事件，这意味着如果您创建元素3次，当您删除元素时，删除处理程序中的逻辑将执行3时间，因此如果我们使用price_rule_count，price_rule_count--将与实际计数不一致，但是，即使我们使用jQuery(".price_rule_area_1").children().length;来获得实数，它也会多余地执行相同的逻辑倍。因此，最好在此处使用.on的委托表单。

＆＃13;

var price_rule_html = '<button class="remove_price_rule button" type="button">Remove Element</button>';
var price_rule_count = jQuery(".price_rule_area_1").children().length;

jQuery('.add_price_rule').click(function () {
	    
	price_rule_count++;
	jQuery('.price_rule_area_1').append('<div class="price_rule_wrapper"><div class="price_rule_count">Element #<span>' + price_rule_count + '</span></div>' + price_rule_html + '</div>');
});

+jQuery('.price_rule_area_1').on("click", ".remove_price_rule", function() {
  
  // As from Arun P Johny's answer, we only need to change the text after the removed element.
  $element =  jQuery(this).parents('.price_rule_wrapper');
  $element
       .nextAll('.price_rule_wrapper')
       .find('span')
       .text(function(index, prevText) {
            return parseInt(prevText, 10) - 1;
        });
  
  
  jQuery(this).parents('.price_rule_wrapper').remove();
  --price_rule_count;
   
  // This would be slower as some elements don't need to be traversed.
  // jQuery('.price_rule_wrapper').each(function(idx) {
  //     $(this).find(".price_rule_count > span").text(idx + 1);
  // });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="price_rule_area_1"></div>
<button class="button-primary add_price_rule" type="button">Add Element</button>

＆＃13;

jsfiddle

Answer 3

您可以更新span元素中price_rule_wrapper元素的内容，例如

var price_rule_html = '<button class="remove_price_rule button" type="button">Remove Element</button>';
var price_rule_count = 1;

var price_rule_count = jQuery(".price_rule_area_1").children().length;

jQuery('.add_price_rule').click(function() {
  price_rule_count++;
  jQuery('.price_rule_area_1').append('<div class="price_rule_wrapper"><div class="price_rule_count">Element #<span>' + price_rule_count + '</span></div>' + price_rule_html + '</div>');
});

jQuery('.price_rule_area_1').on('click', ".remove_price_rule", function() {
  var $wrapper = jQuery(this).closest('.price_rule_wrapper');
  $wrapper.nextAll('.price_rule_wrapper').find('span').text(function(i, text) {
    return text - 1
  })
  $wrapper.remove();
  price_rule_count--;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="price_rule_area_1"></div>
<button class="button-primary add_price_rule" type="button">Add Element</button>

注意：使用事件委派来处理动态重新创建的元素的click事件。

Answer 4

看看这个小提琴，我使用CSS计数器来自动保存你的元素编号： https://jsfiddle.net/wepsrzkm/8/

.price_rule_area_1{
   counter-reset: section; 
}
.price_rule_area_1 .price_rule_wrapper{
    counter-increment: section; 
}
.price_rule_area_1 .price_rule_wrapper .price_rule_count::after{
    content: "#"counter(section);
    display:inline-block;
}

Answer 5

尝试这个伴侣

<html>

<body>

<div class="price_rule_area_1"></div>
<button class="button-primary add_price_rule" type="button">Add Element</button>

</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script>
var price_rule_html = '<button class="remove_price_rule button" type="button">Remove Element</button>';
var price_rule_count = 1;



jQuery('.add_price_rule').click(function () {
    var price_rule_count = jQuery(".price_rule_area_1").children().length;    
    price_rule_count++;
    jQuery('.price_rule_area_1').append('<div class="price_rule_wrapper"><div class="price_rule_count">Element #<span class="bull ">' + price_rule_count + '</span></div>' + price_rule_html + '</div>');

    jQuery(".remove_price_rule").click(function() {
        jQuery(this).parents('.price_rule_wrapper').remove();   
        price_rule_count--;
        alert(jQuery('.price_rule_area_1').children().length)
        jQuery('.price_rule_area_1').children().eq(price_rule_count-1).find('.bull').text(price_rule_count)


    });

});
</script>
</html>

jQuery：计算div中子元素的数量，添加/删除元素时更新数量

5 个答案: