试图追加一个元素的jQuery

Question

我想一个用户已经从下拉列表我的一个选项后，创建一个元素。不幸的是我没有得到我乐意要的结果。我已经取得的结果是这样的：

正如你所看到的链接“删除”已经由用户做出选择的每个选项后面被递增。在创建的div和锚元素之间也没有空间。我想我需要一个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元素

只是其附加到新创建的一个（你必须把它参考）的

相反

$(".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; 

末，

• 你可以在创建时删除处理程序绑定到元素..
• 你还需要设置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（即Nurse，Patient）。

但是你想要做的就是将remove追加到a的最后一个标签。

然后：

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

会为你工作。