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

Question

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>

Mark Schultheiss · Accepted Answer · 2013-09-13 11:36:17Z

3

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/

edited Sep 13, 2013 at 11:36

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

answered Sep 13, 2013 at 11:28

Parv Sharma

12.7k5 gold badges52 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user0129e021939232 Over a year ago

thanks for your input @Parv however this still removes each select box, I want it to remove the select box which I have clicked remove on, therefore I believe I need a unique identifier

Mark Schultheiss Over a year ago

Looks like this would work to me because the added select gets wrapped in a div, could even add a class to that div if needed for clarity.

Greenhorn · Accepted Answer · 2013-09-13 11:31:45Z

2

Try this:

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

Fiddle Here

answered Sep 13, 2013 at 11:31

Greenhorn

1,70011 silver badges12 bronze badges

1 Comment

Mark Schultheiss Over a year ago

This leaves the extra <br /> in that got added

Aditya Singh · Accepted Answer · 2013-09-13 11:33:41Z

1

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

});

answered Sep 13, 2013 at 11:33

Aditya Singh

9,6125 gold badges35 silver badges56 bronze badges

2 Comments

user0129e021939232 Over a year ago

that worked thank you however I've accepted an answer below but will still +1 you as it is an equally good answer!

Mark Schultheiss Over a year ago

No need for the <br /> if it gets wrapped in a block element like a div it would seem

DevlshOne · Accepted Answer · 2013-09-13 11:29:23Z

0

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.

answered Sep 13, 2013 at 11:29

DevlshOne

8,4671 gold badge31 silver badges38 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

2 Comments

1 Comment

Try this out:- http://jsfiddle.net/adiioo7/8ddAW/4/

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Try this out:- http://jsfiddle.net/adiioo7/8ddAW/4/

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related