0

我正在为我的网站创建一个站点地图功能，我有一个功能，它附加一个新的选择框，其中有多个选项，我有一个删除功能，它将删除选择框。

好吧，我说删除选择框，但它实际上所做的是删除所有创建的选择框，但是我希望它以与其相关的选择框为目标。

我相信实现这一点的一种方法是为选择框元素分配一个不同的类，有人知道我该怎么做吗？

或者任何人都可以推荐一种更好的方法来处理这个问题？

我到目前为止的代码如下，或者查看我的jsFiddle

$("#newsublevel").click(function() {
        $(".navoptions").append('<br/><select class="newoption"><option value="Home">Home</option><option value="Home">Home</option><option value="Home">Home</option><option value="Home">Home</option><option value="Home">Home</option></select><a href="#" class="remove">Remove</a>');
    });

$(".navoptions").on('click','.remove',function() {
    $(".newoption, .remove").remove();
});

添加.html

<div class="maincontent">
<h2 class="sitemaphead">Sitemap</h2>
<p>Add a sub level to About.</p>
<div class="navoptions">
<select>
<option value-"Home">Home</option>
<option value-"Home">Home</option>
<option value-"Home">Home</option>
<option value-"Home">Home</option>
<option value-"Home">Home</option>
<option value-"Home">Home</option>
<option value-"Home">Home</option>
</select>
</div>
<p id=""><a href="#" id="newsublevel">Click here</a> to add another sub level</p>

</div>
4

4 回答 4

3

这应该工作

$("#newsublevel").click(function() {
    $(".navoptions").append('<div><select class="newoption"><option value="Home">Home</option><option value="Home">Home</option><option value="Home">Home</option><option value="Home">Home</option><option value="Home">Home</option></select><a href="#" class="remove">Remove</a></div>');
});

$(".navoptions").on('click','.remove',function() {
    $(this).closest('div').remove()
});

我添加了一个容器 div 元素。单击删除代码将找到容器元素并仅删除该元素

这是更新的 jsfiddle http://jsfiddle.net/8ddAW/6/

于 2013-09-13T11:28:06.017 回答
2

试试这个：

$(".navoptions").on('click','.remove',function() {
    $(this).prev().andSelf().remove();       
});

在这里提琴

于 2013-09-13T11:31:45.423 回答
1

试试这个：- http://jsfiddle.net/aiioo7/8ddAW/4/

JS：-

$(function() {

        $("#newsublevel").click(function() {
            $(".navoptions").append('<div><br/><select class="newoption"><option value="Home">Home</option><option value="Home">Home</option><option value="Home">Home</option><option value="Home">Home</option><option value="Home">Home</option></select><a href="#" class="remove">Remove</a></div>');
        });

    $(".navoptions").on('click','.remove',function() {
        $(this).parent().remove();
    });

});
于 2013-09-13T11:33:41.003 回答
0

实际上，通过在表单中​​使用fieldset元素，您可以对<select>您希望“相关”的所有语句进行分组并同时控制它们。更深入地讲，如果您可以跟踪动态添加到的组的索引，则可以使用这些相同的索引来清除它们，而不必使用唯一的类来区分它们。

于 2013-09-13T11:29:23.953 回答