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

Я хочу, чтобы добавить несколько строк в 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()">

Ответы

Ответ 1

Вы можете сделать что-то вроде этого.

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

Ответ 2

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

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

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

Ответ 4

К моему самому большому удивлению, я представляю вам метод DOM, который я никогда раньше не использовал, пытаясь найти этот вопрос и найти древний 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>

Ответ 5

попробуйте выполнить

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

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

    }

Ответ 6

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

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

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

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