Добавить / удалить HTML внутри div с помощью JavaScript

80

Я хочу иметь возможность добавлять несколько строк в div, а также удалять их. У меня есть кнопка «+» вверху страницы, которая предназначена для добавления контента. Затем справа от каждой строки есть кнопка «-» для удаления этой самой строки. Я просто не могу понять код javascript в этом примере.

Это моя основная структура HTML:

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

<div id="content">

</div>

Вот что я хочу добавить в 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()">
javascript html innerhtml Даниэль Товессон
источник
2
Можете ли вы опубликовать свой код JavaScript?
elclanrs
@elclanrs Я пробовал следовать этому руководству: dustindiaz.com/… но не получил код для работы с моим примером. Я также просмотрел обновленный ответ, который он опубликовал, но я действительно не понял код, поскольку я новичок в JavaScript.
Daniel Tovesson

Ответы:

151

Вы можете сделать что-то подобное.

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);
}
Остин Бранкхорст
источник
Я хочу добавить несколько строк. Мой вопрос был немного неясным, поэтому я его отредактировал.
Daniel Tovesson
1
Это поддерживает несколько строк.
Austin Brunkhorst
1
О, верно. Только что сделал ошибку при попытке использовать ваш код. Теперь работает. Ура!
Daniel Tovesson
Хотя, он не работает при <div class="options_part"></div>
переносе
2
О, понял. Вам нужно удалить ребенка от родителя, поэтому измените значение input.parentNodeна input.parentNode.parentNodein removeRow(). Напоминание о том, что если вы добавите еще родителей к кнопкам удаления, вам придется соответственно изменить их, removeRowкак я только что сделал.
Austin Brunkhorst
8

К моему самому большому удивлению, я представляю вам метод DOM, который я никогда не использовал, прежде чем задавал этот вопрос в Google и не нашел древний insertAdjacentHTMLна MDN (см. CanIUse? InsertAdjacentHTML для довольно зеленой таблицы совместимости).

Итак, используя его, вы должны написать

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>
Развернуть фрагмент

Hoffmann
источник
3

Вы можете использовать эту функцию для добавления дочернего элемента к элементу 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

Другое решение - использовать getDocumentByIdи insertAdjacentHTML.

Код:

function addRow() {

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

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

}

Подробнее см. Здесь: Element.insertAdjacentHTML ()

Каталин Матей
источник
2

Чтобы удалить узел, вы можете попробовать это решение, оно мне помогло.

var rslt = (nodee=document.getElementById(id)).parentNode.removeChild(nodee);
Имран Камер
источник
1

создать класс для этой кнопки, скажем:

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

ваш js должен выглядеть так:

$(document).ready(function(){
  $('.b1').click(function(){
      $('div').append('<input type="text"..etc ');
  });
});
Дашме
источник
4
Он не упомянул jQuery.
Austin Brunkhorst
1

пожалуйста, попробуйте следовать, чтобы сгенерировать 

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

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

    }
Аариф Куреши
источник
1

Добавить HTML внутрь div с помощью JavaScript

Синтаксис:

element.innerHTML += "additional HTML code"

или же

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

Удалить HTML внутри div с помощью 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>
Аэзаз Десаи
источник
Пожалуйста, поясните ваш код для спрашивающего. :)
Ламанус
В этом коде мы можем легко ДОБАВИТЬ и УДАЛИТЬ конкретное текстовое поле.
Aezaz Desai