添加删除一段表单中的div的javascript怎么写?

zhongao
  • 108

如图所示,我想用按钮控制添加和删除一段规格的div


不好意思,我第一次用SF,会点html和php基础,完全不懂javascript。我想要实现的就是,点击“添加规格”按钮,可以在后面添加一段<div>,div的内容为我下面贴的代码。然后用一个删除按钮,可以删除该段div。用户可以按实际情况添加和删除一段规格。

            <div class="row">
                <div class="large-4 columns">
                    <div class="row collapse">
                        <div class="small-3 large-4 columns">
                            <span class="prefix">规格</span>
                        </div>
                        <div class="small-9 large-8 columns">
                            <input type="text" name="format[]">
                        </div>
                    </div>
                </div>
                <div class="large-6 columns">
                    <div class="row collapse">
                        <div class="small-2 columns">
                            <input type="text" name="length[]" placeholder="长(CM)">
                        </div>
                        <div class="small-2 columns">
                            <span class="postfix">CM</span>
                        </div>
                        <div class="small-2 columns">
                            <input type="text" name="width[]" placeholder="宽(CM)">
                        </div>
                        <div class="small-2 columns">
                            <span class="postfix">CM</span>
                        </div>
                        <div class="small-2 columns">
                            <input type="text" name="height[]" placeholder="高(CM)">
                        </div>
                        <div class="small-2 columns">
                            <span class="postfix">CM</span>
                        </div>
                    </div>
                </div>
                <div class="large-2 columns">
                    <div class="row collapse">
                        <div class="small-8 columns">
                            <input type="text" name="price[]">
                        </div>
                        <div class="small-4 columns">
                            <span class="postfix">元</span>
                        </div>
                    </div>
                </div>
            </div>
回复
阅读 4.9k
1 个回答

首先,建议楼主去学习一下jquery,因为他真心方便进行这些操作。 首先引入jquery的库。

然后把你的需要插入的div定义成一个变量,例如(以下情况建立在只有一个form,如有多个请增加id)

var code = 'xxxxx';
$("form").append(code);

即可插入你的代码到form最底部。

如果你要删除最后一个class为row元素则是

$(".row").last().remove();

即可

你知道吗?

宣传栏