If you had to do this...
function addRemoveItemNS() {
var $newLi = $('<li class="special">special and new <button class="addone">I am new</button> <button class="removeme">remove me</button></li>');
$('#list9 li.special')
.find('button.addone')
.unbind('click.addit')
.bind('click.addit', function() {
$(this).parent().after($newLi);
addRemoveItemNS();
})
.end()
.find('button.removeme')
.unbind('click.removeit')
.bind('click.removeit', function() {
$(this).parent().remove();
});
}
$(document).ready(function() {
addRemoveItemNS();
});
...with prototype or dojo instead of jquery, how would you do it?
Here is how you could do it using the Dojo trunk code (or Dojo 1.4 once it is released). The trunk code adds support for end() to match your original code better. You could get around that by saving the dojo.query(inserted) as a variable and just calling .query() in two separate statements to get the same effect, and then you could use Dojo 1.3.
function addRemoveItemNS() {
var html = '<li class="special">special and new <button class="addone">I am new</button> <button class="removeme">remove me</button></li>';
var inserted = dojo.place(html, "list9");
dojo.query(inserted)
.query('button.addone')
.onclick(function(evt){
addRemoveItemNS()
})
.end()
.query('button.removeme')
.onclick(function(evt){
//Use normal DOM API for parentNode to get reference.
dojo.destroy(evt.target.parentNode);
});
}
dojo.addOnLoad(function(){
//First create #list9 node? Missing from original code.
dojo.place('<ul id="list9"></ul>', dojo.body());
addRemoveItemNS();
});
Some notes about the code: