Agregar / eliminar HTML dentro de div usando JavaScript

80

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 javascript en este ejemplo.

Esta es mi estructura HTML básica:

<input type="button" value="+" onclick="addRow()">

<div id="content">

</div>

Esto es lo que quiero agregar dentro del div de contenido:

<input type="text" name="name" value="" />
<input type="text" name="value" value="" />
<label><input type="checkbox" name="check" value="1" />Checked?</label>
<input type="button" value="-" onclick="removeRow()">
javascript html innerhtml Daniel Tovesson
fuente
2
¿Puedes publicar tu código JavaScript hasta ahora?
elclanrs
@elclanrs Intenté seguir este tutorial: dustindiaz.com/… pero no conseguí que el código funcionara con mi ejemplo. También miré la respuesta actualizada que publicó, pero realmente no entendí el código ya que soy bastante nuevo en JavaScript.
Daniel Tovesson

Respuestas:

151

Puedes hacer algo como esto.

function addRow() {
  const div = document.createElement('div');

  div.className = 'row';

  div.innerHTML = `
    <input type="text" name="name" value="" />
    <input type="text" name="value" value="" />
    <label> 
      <input type="checkbox" name="check" value="1" /> Checked? 
    </label>
    <input type="button" value="-" onclick="removeRow(this)" />
  `;

  document.getElementById('content').appendChild(div);
}

function removeRow(input) {
  document.getElementById('content').removeChild(input.parentNode);
}
Austin Brunkhorst
fuente
Quiero poder agregar varias filas. Mi pregunta no estaba clara, así que la edité.
Daniel Tovesson
1
Esto admite varias filas.
Austin Brunkhorst
1
Oh, es cierto. Acabo de cometer un error al intentar tu código. Está funcionando ahora. ¡Salud!
Daniel Tovesson
Aunque, no funciona cuando envuelve las entradas en un div como<div class="options_part"></div>
Daniel Tovesson
2
Oh, te tengo. Tienes que quitar un hijo del padre, así que cambia input.parentNodea input.parentNode.parentNodein removeRow(). Un recordatorio de que si agrega más padres a los botones de eliminación, tendrá que cambiar en removeRowconsecuencia, como acabo de hacer.
Austin Brunkhorst
8

Para mi mayor sorpresa, les presento un método DOM que nunca había usado antes de buscar en Google esta pregunta y encontrar la antigüedad insertAdjacentHTMLen MDN (consulte CanIUse? InsertAdjectedHTML para una tabla de compatibilidad bastante verde).

Entonces usándolo escribirías

function addRow () {
  document.querySelector('#content').insertAdjacentHTML(
    'afterbegin',
    `<div class="row">
      <input type="text" name="name" value="" />
      <input type="text" name="value" value="" />
      <label><input type="checkbox" name="check" value="1" />Checked?</label>
      <input type="button" value="-" onclick="removeRow(this)">
    </div>`      
  )
}

function removeRow (input) {
  input.parentNode.remove()
}
<input type="button" value="+" onclick="addRow()">

<div id="content">
</div>
Expandir fragmento

Hoffmann
fuente
3

Puede usar esta función para agregar un niño 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);
}
Arun
fuente
3

Otra solución es usar getDocumentByIdy insertAdjacentHTML.

Código:

function addRow() {

 const  div = document.getElementById('content');

 div.insertAdjacentHTML('afterbegin', 'PUT_HTML_HERE');

}

Consulte aquí para obtener más detalles: Element.insertAdjectedHTML ()

Catalin Matei
fuente
2

Para eliminar el nodo, puede probar esta solución que me ayudó.

var rslt = (nodee=document.getElementById(id)).parentNode.removeChild(nodee);
Imran Qamer
fuente
1

hacer una clase para ese botón, digamos:

`<input type="button" value="+" class="b1" onclick="addRow()">`

su js debería verse así:

$(document).ready(function(){
  $('.b1').click(function(){
      $('div').append('<input type="text"..etc ');
  });
});
Dashme
fuente
4
No mencionó jQuery.
Austin Brunkhorst
1

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

    }
Aarif Qureshi
fuente
1

Agregar HTML dentro de div usando JavaScript

Sintaxis:

element.innerHTML += "additional HTML code"

o

element.innerHTML = element.innerHTML + "additional HTML code"

Eliminar HTML dentro de div usando JavaScript

elementChild.remove();
Vương Hữu Thiện
fuente
0 
<!DOCTYPE html>
<html>
<head>
    <title>Dynamical Add/Remove Text Box</title>
    <script language="javascript">

        localStorage.i = Number(1);

        function myevent(action)
        {
            var i = Number(localStorage.i);
            var div = document.createElement('div');

            if(action.id == "add")
            {
                localStorage.i = Number(localStorage.i) + Number(1);
                var id = i;
                div.id = id;
                div.innerHTML = 'TextBox_'+id+': <input type="text" name="tbox_'+id+'"/>' + ' <input type="button" id='+id+' onclick="myevent(this)" value="Delete" />';

                document.getElementById('AddDel').appendChild(div);
            }
            else
            {
                var element = document.getElementById(action.id);
                element.parentNode.removeChild(element);
            }
        }
    </script>
</head>
<body>
    <fieldset>
    <legend>Dynamical Add / Remove Text Box</legend>
    <form>
        <div id="AddDel">
            Default TextBox:
            <input type="text" name="default_tb">
            <input type="button" id="add" onclick="myevent(this)" value="Add" />
        </div>
            <input type="button" type="submit" value="Submit Data" />
    </form>
    </fieldset>
</body>
</html>
Aezaz Desai
fuente
Explique un poco su código para el interlocutor. :)
Lamanus
En este código podemos AGREGAR y QUITAR fácilmente un cuadro de texto específico.
Aezaz Desai