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

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

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>


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

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


2

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

var rslt = (nodee=document.getElementById(id)).parentNode.removeChild(nodee);

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

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

    }

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

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>

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
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.