Quiero poder agregar varias filas a un div y también eliminarlas. Tengo un botón ‘+’ en la parte superior de la página que es para agregar contenido. Luego, a la derecha de cada fila, hay un botón ‘-‘ que sirve para eliminar esa misma fila. Simplemente no puedo entender el código de JavaScript en este ejemplo.
Esta es mi estructura HTML básica:
Esto es lo que quiero agregar dentro del div de contenido:
Puedes hacer algo como esto.
function addRow() { var div = document.createElement('div'); div.className = 'row'; div.innerHTML = '\ \ \ '; document.getElementById('content').appendChild(div); } function removeRow(input) { document.getElementById('content').removeChild(input.parentNode); }
Para eliminar el nodo puedes probar esta solución que me ayudó.
var rslt = (nodee=document.getElementById(id)).parentNode.removeChild(nodee);
Puede usar esta función para agregar un elemento secundario a un elemento DOM.
function addElement(parentId, elementTag, elementId, html) { // Adds an element to the document var p = document.getElementById(parentId); var newElement = document.createElement(elementTag); newElement.setAttribute('id', elementId); newElement.innerHTML = html; p.appendChild(newElement); } function removeElement(elementId) { // Removes an element from the document var element = document.getElementById(elementId); element.parentNode.removeChild(element); }
por favor intente seguir para generar
function addRow() { var e1 = document.createElement("input"); e1.type = "text"; e1.name = "name1"; var cont = document.getElementById("content") cont.appendChild(e1); }
hacer una clase para ese botón digamos:
``
tu js debería verse así:
$(document).ready(function(){ $('.b1').click(function(){ $('div').append('
Para mi mayor sorpresa, les presento un método DOM que nunca he usado antes de abordar esta pregunta y encontrar insertAdjacentHTML antiguo en MDN (vea CanIUse? InsertAdjacentHTML para obtener una tabla de compatibilidad bastante verde).
Entonces usándolo escribirías
function addRow () { document.querySelector('#content').insertAdjacentHTML( 'afterbegin', ` ` ) } function removeRow (input) { input.parentNode.remove() }