Hinzufügen / Entfernen von HTML in div mithilfe von JavaScript

80

Ich möchte in der Lage sein, einem div mehrere Zeilen hinzuzufügen und sie auch zu entfernen. Ich habe oben auf der Seite ein "+", mit dem Sie Inhalte hinzufügen können. Dann gibt es rechts von jeder Zeile eine '-' Schaltfläche, mit der genau diese Zeile entfernt werden kann. Ich kann den Javascript-Code in diesem Beispiel einfach nicht herausfinden.

Dies ist meine grundlegende HTML-Struktur:

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

<div id="content">

</div>

Folgendes möchte ich im Inhaltsbereich hinzufügen:

<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
quelle
2
Können Sie Ihren JavaScript-Code bisher veröffentlichen?
Elclanrs
@elclanrs Ich habe versucht, diesem Tutorial zu folgen : Dustindiaz.com/… , aber den Code für mein Beispiel nicht erhalten. Ich habe mir auch die aktualisierte Antwort angesehen, die er gepostet hat, aber ich habe den Code nicht wirklich verstanden, da ich ziemlich neu in JavaScript bin.
Daniel Tovesson

Antworten:

149

Sie können so etwas tun.

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
quelle
Ich möchte in der Lage sein, mehrere Zeilen hinzuzufügen. Meine Frage war etwas unklar, deshalb habe ich sie bearbeitet.
Daniel Tovesson
1
Dies unterstützt mehrere Zeilen.
Austin Brunkhorst
1
Oh, das stimmt. Ich habe gerade einen Fehler beim Testen Ihres Codes gemacht. Es funktioniert jetzt. Prost!
Daniel Tovesson
Obwohl es nicht funktioniert, wenn die Eingaben in ein div wie<div class="options_part"></div>
Daniel Tovesson
2
Oh, hab dich. Sie müssen ein Kind vom Elternteil entfernen, wechseln Sie also input.parentNodezu input.parentNode.parentNodein removeRow(). Eine Erinnerung daran, dass Sie, wenn Sie den Schaltflächen zum Entfernen weitere Eltern hinzufügen, diese entsprechend ändern müssen, removeRowwie ich es gerade getan habe.
Austin Brunkhorst
7

Zu meiner größten Überraschung präsentiere ich Ihnen eine DOM-Methode, die ich noch nie zuvor verwendet habe, um diese Frage zu googeln und insertAdjacentHTMLauf MDN uralt zu finden (eine ziemlich grüne Kompatibilitätstabelle finden Sie unter CanIUse? InsertAdjacentHTML ).

Wenn Sie es also verwenden, würden Sie schreiben

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>
Erweitern Sie das Snippet

Hoffmann
quelle
3

Mit dieser Funktion können Sie einem DOM-Element ein untergeordnetes Element hinzufügen.

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
quelle
3

Eine andere Lösung ist die Verwendung von getDocumentByIdund insertAdjacentHTML.

Code:

function addRow() {

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

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

}

Weitere Informationen finden Sie hier: Element.insertAdjacentHTML ()

Catalin Matei
quelle
2

Um Knoten zu entfernen, können Sie diese Lösung ausprobieren, die mir geholfen hat.

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

Erstellen Sie eine Klasse für diese Schaltfläche. Sagen wir:

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

Ihr js sollte so aussehen:

$(document).ready(function(){
  $('.b1').click(function(){
      $('div').append('<input type="text"..etc ');
  });
});
dashme
quelle
4
Er erwähnte jQuery nicht.
Austin Brunkhorst
1

Bitte versuchen Sie Folgendes zu generieren 

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

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

    }
Aarif Qureshi
quelle
1

Fügen Sie HTML in div mit JavaScript hinzu

Syntax:

element.innerHTML += "additional HTML code"

oder

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

Entfernen Sie HTML in div mit JavaScript

elementChild.remove();
Vương Hữu Thiện
quelle
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
quelle
Bitte erläutern Sie dem Fragesteller Ihren Code ein wenig. :)
Lamanus
In diesem Code können wir leicht bestimmte Textbox HINZUFÜGEN und ENTFERNEN.
Aezaz Desai