Agregar / eliminar HTML dentro de div usando JavaScript

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() }