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>