web-dev-qa-db-fra.com

Ajouter / supprimer du code HTML dans div à l'aide de JavaScript

Je veux pouvoir ajouter plusieurs lignes à un div et les supprimer. J'ai un bouton '+' en haut de la page pour ajouter du contenu. Ensuite, à droite de chaque ligne, un bouton "-" sert à supprimer cette ligne. Je n'arrive pas à comprendre le code javascript dans cet exemple.

Ceci est ma structure HTML de base:

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

<div id="content">

</div>

C'est ce que je veux ajouter à l'intérieur du contenu div:

<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()">
javascripthtmlinnerhtml
61
Daniel Tovesson

Vous pouvez faire quelque chose comme ça.

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);
}
121
Austin Brunkhorst

Pour supprimer le noeud, vous pouvez essayer cette solution, il m'a aidé.

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

Vous pouvez utiliser cette fonction pour ajouter un enfant à un élément 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
Arun

À ma plus grande surprise, je vous présente une méthode DOM que je n'avais jamais utilisée auparavant pour rechercher cette question et trouver l'ancien insertAdjacentHTML sur MDN (voir CanIUse? InsertAdjacentHTML pour un tableau de compatibilité assez vert).

Donc, en l'utilisant, vous écririez

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
Hoffmann

s'il vous plaît essayez de suivre pour générer

 function addRow()
    {
        var e1 = document.createElement("input");
        e1.type = "text";
        e1.name = "name1";

        var cont = document.getElementById("content")
        cont.appendChild(e1);

    }
1
Aarif Qureshi

faire une classe pour ce bouton permet de dire:

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

votre js devrait ressembler à ceci:

$(document).ready(function(){
  $('.b1').click(function(){
      $('div').append('<input type="text"..etc ');
  });
});
0
dashme