-1

I have a function in my jquery that will append a new select class on the click of a link. What I now what to do is remove this class on the click of a button in case a user decides not to use this select function.

My append function works like so:

$("#newsublevel").click(function() {
        $(".navoptions").append('<br/><select class="hello"><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>');
    });

I have this on my remove function however this is not working at all:

$(".remove").click(function() {
        $(".hello").remove();
    });

How can I effectively remove the select box that the hyperlink is referring to? I've tried about two different ways to remove this without success, any ideas?

add.html

<div class="maincontent">
<h2 class="sitemaphead">Sitemap</h2>
<p>Add a sub level to About.</a></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

试试.on()

$(".navoptions").on('click','.remove',function() {
     $(".hello").remove();
});
于 2013-09-13T11:11:23.937 回答
1

由于 SELECT 对象是动态添加的，因此在初始 DOM 创建之后，它不与任何侦听器关联。[在您的情况下为 onClick]。

像其他人建议的那样，使用“.on”动态添加监听器。您可以在此处找到相关文档。http://api.jquery.com/on/

于 2013-09-13T11:21:11.770 回答
1

尝试这个

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

演示

于 2013-09-13T11:11:49.840 回答
0 
$(".navoptions").on('click','.remove',function() {
        $(".hello").remove();
});

参考开

于 2013-09-13T11:12:41.623 回答