Question

我希望能够添加新的部分（通过“添加”链接）并将其删除（通过“x”按钮），如图中所示。

screenshot

图片的HTML：

<fieldset>
   <legend>Legend</legend>

        <div id="section0">
            <input type="text" name="text1" value="Text1" />
            <input type="text" name="text2" value="Text2" size='40' />
            <input type="button" value="x" style="width: 26px" /><br />
        </div>

     <a href="#">add</a><br />

</fieldset>

我想我可以根据需要添加新的部分（例如section1，section2），并根据按下的按钮删除这些部分。每次点击“添加”链接时，会有一个javascript函数会在DOM中注入部分，而每次单击“x”按钮时都会删除一个部分。

由于我对HTML和Javascript的经验很少，我不知道这是一个好/坏的解决方案。所以，我的问题恰恰是：这是正确的做法还是更简单/更好？感谢。

P.S。：随意回答一些示例代码

Answer 1

我刚刚在几分钟之前使用jQuery回答了一个几乎完全相同的问题：https://stackoverflow.com/a/10038635/816620如果你想看看它是如何工作的那样。

如果你想要普通的javascript，可以这样做。

HTML：

<div id="section0">
    <input type="text" name="text1" value="Text1" />
    <input type="text" name="text2" value="Text2" size='40' />
    <input type="button" value="x" style="width: 26px" /><br />
</div>

<a href="#" onclick="addSection(this)">add</a><br />

使用Javascript：

function addSection(where) {
    var main = document.getElementById("section0");
    var cntr = (main.datacntr || 0) + 1;
    main.datacntr = cntr;

    var clone = main.cloneNode(true);
    clone.id = "section" + cntr;
    where.parentNode.insertBefore(clone, where);    
}

工作演示：http://jsfiddle.net/jfriend00/TaNFz/

Answer 2

这是一种方法：

<script type="text/javascript">
function newrow() {
document.getElementById("customTable").innerHTML += "<tr><td><input type='text'></td><td><input type='text'></td><td><button onclick='del(this)'>X</button></td></tr>";
}

function del(field) {
field.parentNode.parentNode.outerHTML = "";
}
</script>

<body onload="newrow()">
<fieldset>
    <legend>Legend</legend>
    <table>
        <tbody id="customTable">
        </tbody>
    </table>
<button onclick="newrow()">Add</button> 
</fieldset>
</body>

如果需要，您可以为它们添加ID，或者您可以按位置document.getElementsByTagName("input")[x].value调用它们。输入将从0开始，因此左边的一个是0，右边是1，添加行：左边是2 ，右边是3，等等。

如果删除一个序列，则序列不会混乱（每次重新评估），这比硬编码ID更好。

Answer 3

http://pastebin.com/QBMEJ2pq是一个稍长但有力的答案。

使用javascript添加和删除dom部分

3 个答案: