尝试附加jQuery元素

Question

用户从我的下拉列表中选择一个选项后，我试图创建一个元素。 不幸的是我没有得到我想要的结果。 我获得的结果如下所示：

如您所见，在用户选择了每个选项之后，“删除”链接会增加。 在创建的div和anchor元素之间也没有空间。 我想我需要一个for循环来解决递增链接remove 。 但是我真的不知道如何。 我尝试了以下方法：

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

重要的错误是您div.a remove链接附加到所有div.a元素

只需将其附加到新创建的（ 您对此有一个引用 ）

代替

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

采用

$new.append(newLink);    

---

另外，如果您多次访问所使用的元素，则应将其缓存。 如果可用，也最好使用本机属性

所以这

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

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

可以变成

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

option.disabled = true;

持续，

• 您可以在创建时将remove处理程序绑定到该元素。
• 您还需要设置rel属性
• 您需要删除该元素而不是仅将其隐藏，因为每次更改select元素时都会创建一个新元素
• 您需要删除id5因为您创建了多个具有相同id的链接，而这是无效的

所有变化在一起

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

演示位于http://jsfiddle.net/gaby/pzq8hqjw/7/

Answer 2

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

将newLink附加到所有匹配的标签。 这是在你的情况下，每一个有标记类a （即护士，病人）。

但是，您要做的是将remove仅附加到具有a类的最后一个标签上。

然后：

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

将为您工作。