Add/Remove items to lists

by shapeshifta

HTML

<div class="group">
        <div class="item"><span class="counter flt">1</span></div>
        
        <a href="#" class="addMore">Mehr</a>
    </div>
    <div class="group">
        <div class="item"><span class="counter">1</span></div>
        
        <a href="#" class="addMore">Mehr</a>
    </div>

CSS

.flt{float:left}
.item{overflow:hidden}
.delete{display:block;width:30px;height:30px;background:#efefef}
.addMore{clear:left}

JavaScript

$.fn.recount = function() {
    var els = this.find('span.counter');
    if(els != null){
        els.each(function(idx) {
            this.innerHTML = idx + 1;
        });
    }
};

$('div.group').delegate('a.addMore', 'click', function(e) {
    var $this = $(this);
    $this
        .before('<div class="item"><span class="counter flt"></span><span class="delete">X</span></div>')
        .closest('div.group').recount();
    e.preventDefault();
}).delegate('span.delete', 'click', function() {
    var $this = $(this);
    var node = $this.closest('div.group');
    $this.parent().remove();
    node.recount();
});