Question

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

嗯，我说删除选择框，但它实际上做的是删除所有创建的选择框，但是我希望它能够定位与之相关的选择框。

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

或者任何人都可以推荐更好的方法来解决这个问题吗？

我到目前为止的代码如下，或查看我的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();
});

add.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>

Answer 1

这应该有效

$("#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/

Answer 2

试试这个：

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

Fiddle Here

Answer 3

试试这个： - http://jsfiddle.net/adiioo7/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();
    });

});

Answer 4

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

jQuery追加html元素，但每次都有不同的类名

4 个答案:

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