$(function () {
function creaBoton(clase, valor) {
return '<input type="button" class="btn btn-success ' + clase + '" value="' + valor + '">';
}
function lista(elementos, valor) {
var res = "<ul>";
for (var i = 0; i < elementos; i++) {
res += '<li>' + valor + '</li>';
}
return res + "</ul>";
}
function columna(ancho, elementos) {
var columna = '<div class="col-sm-' + ancho + '">';
columna += creaBoton('menos', '-');
columna += creaBoton('mas', '+');
columna += creaBoton('otros', '/\\');
columna += creaBoton('otrosmenos', '\\/');
columna += lista(elementos, "-");
columna += "</div>";
return columna;
}
function columnas(ncol, ancho, elementos) {
var res = "";
for (var i = 0; i < ncol; i++) {
res += columna(ancho, elementos);
}
return res;
}
$('#nuevo').click(function () {
$('#resultado').html(columnas(4, 3, 5));
$('.menos').click(function () {
// $(this).siblings('ul').children().eq(0) .remove();
//Buscamos los hermanos de tipo 'ul' y quitamos el último hijo
$(this).siblings('ul').children().last().remove();
//Si ya no hay más hijos deshabilitamos el botón
if ($(this).siblings('ul').children().length === 0) {
$(this).attr('disabled', 'disabled');
}
});
$('.mas').click(function () {
//Buscamos el hermano de tipo ul y añadimos un elemento
$(this).siblings('ul').append('<li>-</li>');
$(this).siblings('.menos').removeAttr('disabled');
});
$('.otros').click(function () {
//Los hermanos de mi columna tienen listas 'ul' y añadimos un elemento
$(this).parent().siblings().children('ul').append('<li>-</li>');
$(this).parent().siblings().children('.menos').removeAttr('disabled');
});
$('.otrosmenos').click(function () {
//Los hermanos de mi columna tienen listas 'ul' y añadimos un elemento
$(this).parent().siblings().children('ul').each(function () {
$(this).children().last().remove();
if ($(this).children().length === 0) {
$(this).siblings('.menos').attr('disabled', 'disabled');
}
});
});
});
});
