CODEWITHSUNDEEP
jqueryhtml
user0129e021939232
user0129e021939232

Reputation: 6355

jQuery append html element but with a different class name each time

I'm creating a sitemap function for my website what I have a function which appends a new select box which multiple options and I have a remove function which will remove the select box.

Well I say remove the select box but what it actually does is remove all the select boxes that were created, however I wanted it to target the select box that it is related to.

I believe one way to implement this is to assign a different class to the select box element, does anyone know how I can do this?

Or can anyone recommend a better way to handle this?

The code I have so far is below, or view my 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>

Upvotes: 0

Views: 207

Answers (4)

Parv Sharma
Parv Sharma

Reputation: 12705

this should work 

$("#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()
});

i have added a container div element. on clicking the remove the code will find the container element and will remove only that

here is the updated jsfiddle http://jsfiddle.net/8ddAW/6/

Upvotes: 3

Aditya Singh
Aditya Singh

Reputation: 9612

Try this out:- 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();
    });

});

Upvotes: 1

Greenhorn
Greenhorn

Reputation: 1700

Try this:

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

Fiddle Here

Upvotes: 2

DevlshOne
DevlshOne

Reputation: 8457

Actually, by using the fieldset element inside your form, you can perform grouping of all the <select> statements that you would like to be "related" and control them all at once. Even deeper, if you can keep track of the indexes of the groups that you're dynamically adding to, you could use those same indexes to clear them out without having to differentiate between them using unique classes.

Upvotes: 0

Related Questions