使用JavaScript在div中添加/删除HTML


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

2
到目前为止,您可以发布您的JavaScript代码吗?
elclanrs

@elclanrs我尝试按照本教程进行操作:dustindiaz.com/…,但没有使代码与我的示例配合使用。我还调查了他发布的最新答案,但由于我对JavaScript相当陌生,所以我不太了解代码。
Daniel Tovesson

Answers:


149

你可以做这样的事情。

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
这支持多行。
奥斯汀·布伦霍斯特

1
哦是的 尝试输入代码时出错。现在正在工作。干杯!
Daniel Tovesson

虽然,当将输入包装成div这样的输入时,它不起作用<div class="options_part"></div>
Daniel Tovesson

2
哦,知道了。你必须从母体取出一个孩子,所以改变input.parentNodeinput.parentNode.parentNoderemoveRow()。提醒您,如果将更多的父母添加到“删除”按钮,则必须removeRow像我刚才那样进行相应的更改。
奥斯汀·布伦霍斯特

7

令我最大的惊讶的是,我向您介绍了一个从未使用过的DOM方法,在对这个问题进行解答并insertAdjacentHTMLMDN上找到古老的方法之前(请参阅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>


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


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。
奥斯汀·布伦霍斯特

1

请尝试跟随生成

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

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

    }

1

使用JavaScript在div中添加HTML

句法:

element.innerHTML += "additional HTML code"

要么

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

使用JavaScript删除div中的HTML

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>

请为发问者解释一下您的代码。:)
Lamanus

在此代码中,我们可以轻松添加和删除特定的文本框。
Aezaz Desai
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.