Adicionar e remover elementos HTML com Javascript

As noções básicas

Conheçam uma eficiente solução para adição e remoção de itens em HTML utilizando javascript. O efeito é similar ao utilizado nos botões de anexar do google ao se adicionar um novo anexo ou remover.

Assim, você tem três elementos básicos: adição de eventos; criação e junção de elementos, bem como a capacidade para removê-los.

Por exemplo:

incluir evento / adição / remoção

* element.addEventListener(el, type, fn);
* parent.appendChild(element);
* parent.removeChild(element);

Para esta tarefa básica, utilizam-se essas duas ações como um "esqueleto" para agir com sua API que irá se adequar conforme o DOM object e o Event object.

Dom e Event

var Dom = {
get: function(el) { },
add: function(el, dest) { },
remove: function(el)
};

Event = {
add: function(el, type, fn) { }
};

Seu código pode ficar encapsulado quando se adiciona este comportamento ao evento de ‘load’.


Implementação

Event.add(window, 'load', function() {
// enclosed implementation here
});

Com isso, sua interface ganha em performance e em usabilidade.

O preenchimento dos campos.

Interface

var Dom = {
get: function(el) {
if (typeof el === 'string') {
return document.getElementById(el);
} else {
return el;
}
},
add: function(el, dest) {
var el = this.get(el);
var dest = this.get(dest);
dest.appendChild(el);
},
remove: function(el) {
var el = this.get(el);
el.parentNode.removeChild(el);
}
};
var Event = {
add: function() {
if (window.addEventListener) {
return function(el, type, fn) {
Dom.get(el).addEventListener(type, fn, false);
};
} else if (window.attachEvent) {
return function(el, type, fn) {
var f = function() {
fn.call(Dom.get(el), window.event);
};
Dom.get(el).attachEvent('on' + type, f);
};
}
}()
};

Implementação

Event.add(window, 'load', function() {
var i = 0;
Event.add('add-element', 'click', function() {
var el = document.createElement('p');
el.innerHTML = 'Remove This Element (' + ++i + ')';
Dom.add(el, 'content');
Event.add(el, 'click', function(e) {
Dom.remove(this);
});
});
});