Agregar Y Eliminar Elementos De Forma Dinámica Con jQuery
jQuery ha sido y sin duda seguirá siendo una de las mejores librerías de javaScript, brindando la oportunidad de hacer grandes cosas con menos lineas de código, de las que normalmente se requieren con javaScript. Una de estas ventajas, es añadir o eliminar elementos HTML de forma dinámica con jQuery.
Podemos hacer esto facilmente, con una pequeña ayuda de métodos de jQuery. Estamos hablando de métodos como append(), after() y remove(), ya que estos son los principales métodos utilizados para el desarrollo de una página dinámica. Para ser honesto, usted no tienes que ser un maestro de JavaScript para agregar o quitar elementos útiles e interactivos en su página web de forma dinámica.
Estos elementos también pueden tener atributos y propiedades, todos asignados dinámicamente durante la creación, y al añadirlos en la página web. A continuación te mostraremos un ejemplo practico, en el cual podrás añadir y eliminar elementos mientras pulsas los determinado botones, e incluso eliminar todos los elementos creados de igual forma.
El Resultado
A continuación podrás ver el ejemplo del ejercicio, justo debajo, puedes encontrar el código usado para el ejemplo dado:
See the Pen ByOOLr by HostDime Colombia (@HostDimeColombia) on CodePen.
El HTML
[html]
<body>
<div id="main">
<input type="button" id="btAdd" value="Añadir Elemento" class="bt" />
<input type="button" id="btRemove" value="Eliminar Elemento" class="bt" />
<input type="button" id="btRemoveAll" value="Eliminar Todo" class="bt" /><br />
</div>
</body>[/html]
El Javascript
[js]
$(document).ready(function() {
var iCnt = 0;
// Crear un elemento div añadiendo estilos CSS
var container = $(document.createElement(‘div’)).css({
padding: ‘5px’, margin: ’20px’, width: ‘170px’, border: ‘1px dashed’,
borderTopColor: ‘#999’, borderBottomColor: ‘#999’,
borderLeftColor: ‘#999’, borderRightColor: ‘#999’
});
$(‘#btAdd’).click(function() {
if (iCnt <= 19) {
iCnt = iCnt + 1;
// Añadir caja de texto.
$(container).append(‘<input type=text class="input" id=tb’ + iCnt + ‘ ‘ +
‘value="Elemento de Texto ‘ + iCnt + ‘" />’);
if (iCnt == 1) {
var divSubmit = $(document.createElement(‘div’));
$(divSubmit).append(‘<input type=button class="bt" onclick="GetTextValue()"’ +
‘id=btSubmit value=Enviar />’);
}
$(‘#main’).after(container, divSubmit);
}
else { //se establece un limite para añadir elementos, 20 es el limite
$(container).append(‘<label>Limite Alcanzado</label>’);
$(‘#btAdd’).attr(‘class’, ‘bt-disable’);
$(‘#btAdd’).attr(‘disabled’, ‘disabled’);
}
});
$(‘#btRemove’).click(function() { // Elimina un elemento por click
if (iCnt != 0) { $(‘#tb’ + iCnt).remove(); iCnt = iCnt – 1; }
if (iCnt == 0) { $(container).empty();
$(container).remove();
$(‘#btSubmit’).remove();
$(‘#btAdd’).removeAttr(‘disabled’);
$(‘#btAdd’).attr(‘class’, ‘bt’)
}
});
$(‘#btRemoveAll’).click(function() { // Elimina todos los elementos del contenedor
$(container).empty();
$(container).remove();
$(‘#btSubmit’).remove(); iCnt = 0;
$(‘#btAdd’).removeAttr(‘disabled’);
$(‘#btAdd’).attr(‘class’, ‘bt’);
});
});
// Obtiene los valores de los textbox al dar click en el boton "Enviar"
var divValue, values = »;
function GetTextValue() {
$(divValue).empty();
$(divValue).remove(); values = »;
$(‘.input’).each(function() {
divValue = $(document.createElement(‘div’)).css({
padding:’5px’, width:’200px’
});
values += this.value + ‘<br />’
});
$(divValue).append(‘<p><b>Tus valores añadidos</b></p>’ + values);
$(‘body’).append(divValue);
}[/js]
El CSS
[css]body {
font-weight: normal;
}[/css]