Question

假设有一组元素如：

<p>What's your question?</p>
<input type='text' name='question'/>

还有一个按钮：

<input type='button' value='Add' />

我想实现当我单击按钮时，该组将动态地在html页面上创建元素。除了元素旁边还有一个删除按钮：

<input type='button' value='Remove' />

当我点击它时，元素将被删除。

该过程可以动态执行多次，所有这些元素都包含在表单中。用户输入答案后，所有信息都将发布到另一页。

我认为这个功能可以由js实现，但我不知道该怎么做。请提供一些代码。谢谢！

Answer 1

这个问题已被多次询问过。搜索“Javascript show hide element”。

就个人而言，我会使用jQuery库，使用ID标记标记输入元素或您希望动态显示和隐藏的标记周围的div，并使用以下代码：

$('#someuniqueid').hide();

$('#someuniqueid').show();

隐藏并显示您的标记。此解决方案假设输入元素已经在页面中，JaredPar的解决方案动态创建输入元素。两者都和对方一样好 - 但jQuery使这很容易。

如果您想要一个vanilla js解决方案 - 通过搜索来查看其他答案 - 有几个可供选择。

Answer 2

最简单的方法是使用jQuery并在按钮上执行添加/删除操作

HTML：

<div>
    <button id='addButton'>Add</button>
    <button id='removeButton'>Remove</button>
</div>
<div id='target'></div>

JavaScript的：

$(document).ready(function() {
    $('#addButton').click(function () {
        var elem = $('<div></div>');
        elem.append('<p>What\'s your name</p>');
        elem.append('<input type="text">');
        $('#target').append(elem);
    }); 

    $('#removeButton').click(function () {
        $('#target div:last').remove();
    })
});

小提琴：http://jsfiddle.net/XZqPa/

如何动态添加和删除输入文本框？

2 个答案: