尝试附加jQuery元素

Question

I'm trying to create an element after a user has selected an option from my dropdownlist. Unfortunately I'm not getting the result that I gladly want. The result that I had achieved looked like this:

As you see the link 'remove' gets incremented after each selected option that has been made by the user. Also there is no space between the created div and anchor element. I think I need a for loop to fix the incrementing link remove . But I really don't know how. I have tried the following:

 $("#theSelect").change(function() { var value = $("#theSelect option:selected").val(); var theDiv = $(".is" + value); //theDiv.slideDown().removeClass("hidden"); $("#theSelect option:selected").attr('disabled', 'disabled'); var $div = $("<div>", { id: "foo", class: "a", text: value }); //$div.click(function(){ /* ... */ }); $(".selectContainer").append($div); var newLink = $("<a />", { id: "id5", name: "link", href: "#", text: "remove" }); $(".a").append(newLink); }); $("div a.remove").click(function() { var value = $(this).attr('rel'); var theDiv = $(".is" + value); $("#theSelect option[value=" + value + "]").removeAttr('disabled'); $(this).parent().slideUp(function() { $(this).addClass("hidden"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="selectContainer"> <select id="theSelect"> <option value="">- Select -</option> <option value="Patient">Patient</option> <option value="Physician">Physician</option> <option value="Nurse">Nurse</option> </select> </div> <!-- <div class="hidden isPatient">Patient <a href="#" class="remove" rel="Patient">remove</a></div> --> <!-- <div class="hidden isPhysician">Physician <a href="#" class="remove" rel="Physician">remove</a></div> --> <!-- <div class="hidden isNurse">Nurse <a href="#" class="remove" rel="Nurse">remove</a></div> --> 

Answer 1

The important error is that you are appending the remove link to all div.a elements

Just append it to the newly created one ( you have a reference to it )

Instead of

$(".a").append(newLink);    

use

$new.append(newLink);    

---

Additionally, you should cache references to elements you use if you access them more than once. Using native properties is also preferred when available

So this

var value = $("#theSelect option:selected").val();
var theDiv = $(".is" + value);

//theDiv.slideDown().removeClass("hidden");
$("#theSelect option:selected").attr('disabled','disabled');

can become

var option = this.options[this.selectedIndex],
    value = option.value,
    theDiv = $(".is" + value);

option.disabled = true;

Last,

• you can bind the remove handler to the element at creation time..
• you also need to set the rel attribute
• you need to remove the element instead of just hiding it, since you create new ones each time you change the select element
• you need to remove the id5 since you create multiple links with the same id and that is invalid

All changes together

$("#theSelect").change(function(){          
    var option = this.options[this.selectedIndex],
        value = option.value;

    var theDiv = $(".is" + value);

    //theDiv.slideDown().removeClass("hidden");
    option.disabled = true;

    var $div = $("<div>", {id: "foo", class: "a", text: value });
    //$div.click(function(){ /* ... */ });
    $(".selectContainer").append($div);

    var newLink = $("<a />", {
        name : "link",
        href : "#",
        text : "remove",
        rel : value,
        click: remove
    });

    $div.append(newLink);    

});

function remove() { 
    var value = $(this).attr('rel');
    var theDiv = $(".is" + value);

    $("#theSelect option[value=" + value + "]").removeAttr('disabled');

    $(this).parent().slideUp(function() { $(this).remove(); });
};

Demo at http://jsfiddle.net/gaby/pzq8hqjw/7/

Answer 2

$(".a").append(newLink);  

appends newLink to all the matched tags. Which are in your case, every tag having class a (ie Nurse, Patient).

But what you want to do is to append remove to only the last tag having class a .

Then:

$(".a:last").append(newLink);  

will work for you.