Agregar Y Eliminar Elementos De Forma Dinámica Con jQuery
Tiempo estimado de lectura 2 minutos

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.

logo 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


<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>

El Javascript


$(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);

}

El CSS

body {
font: 13px verdana;
font-weight: normal;
}

Este post tiene 6 comentarios

  1. paty

    hola tengo una tabla generada dinamica de la base de datos y añadi una columna mas por cada fila para segun los datos mostrados muestre en esa columna un colo y valor determinado. Inicialmente el programa calcula y realiza esta operacion para la primera fila, pero para las otras 4 filas no realiza nada. y la operacion de cada fila la muestra en esa unica celda. Como puedo accesar a las celdas si no tengo identificados esas celdas?Abria que creatElement con jqery o algo asi? Gracias

Deja un comentario