Javascript: Delete child element with Effect.Fade (Effect.Fade and Element.remove)

hi all,
let’s think you have a list of rows… when user click on delete button it sends a Ajax post request on server… after receiving JSON or XML response… it display a visual effect of destroying that row…
using Script.aculo.us you can make it with in a few seconds… new Effect.Fade(…) right!!!
but i think you DOM tree will not get that advantage as you are giving to your user… user could see visual disappearance of some object… but it is actually not deleting from DOM tree… you just hidding them… !!!

though you can use element.removeChid( childElement ) … but it is not much interactive approach as you want to show a visiual effect….

so here is my code snap… hope you will enjoy… and your visitor will happy as well as DOM tree will happy…

deleteElement: function(divId, options) {
try {
var element = $(divId);
var oldOpacity = element.getInlineOpacity();
var options = Object.extend({
from: element.getOpacity() || 1.0,
to:   0.0,
afterFinishInternal: function(effect) {
if(effect.options.to!=0) return;
var rootElement = $(BnChat.userListDiv);
rootElement.removeChild(effect.element);
effect.element.setStyle({opacity: oldOpacity});
}}, arguments[1] || {});
return new Effect.Opacity(element,options);
}
catch(e) {
// goes your exception handling
}
},

Advertisement