Question

我有一个面向用户的管理员个人资料页面，管理员可以在此页面上对每个用户进行任何更改。我正在尝试为管理员创建一种更快的方法，以使用jquery / javascript添加/删除角色。我有一个包含所有可用角色的下拉列表，还有一个<ul>，其中包含当前用户所在的角色。我的问题是，当我从下拉列表中动态添加一个角色并将其放置在{{1 }}，如果我尝试将其从无法删除的ul中删除。

<ul>

@model Dev.Internal.Models.UserAndRolesDTO

<h4>Existing Roles</h4>
<hr />
<div class="input-group">
    @Html.DropDownList("AddRole", null, "-- Select Roles --", new { @class = "form-control" })
    <span class="input-group-btn">
        <input id="RoleButton" type="button" value="Add Role" class="btn btn-primary"  />
    </span>
</div>
<br />

<div class="row">
    <div class="col-sm-4">
        <div class="list-group">
            <ul class="nav navbar-nav" id="Rolegroup">
                @foreach (var item in Model.colUserRoleDTO)
                {
                    <li class="list-group-item text-nowrap">
                        @Html.DisplayFor(modelItem => item.RoleName)
                        @if (!((Model.UserName.ToLower() == this.User.Identity.Name.ToLower()) && item.RoleName == "Administrator") && item.RoleName != "No Roles Found")
                        {
                            <a href="#" style="font-size: 10pt;">Remove</a>
                        }
                    </li>
                }
            </ul>
        </div>
    </div>
</div>

当我点击//add roles on button click $('#RoleButton').click(function () { var listvalue = $('#AddRole :selected').val(); if (listvalue != "") { $('#Rolegroup').append('<li class="list-group-item text-nowrap">' + listvalue + ' <a href="#" style="font-size: 10pt;">Remove</a></li>'); $('#AddRole :selected').remove(); } }); //remove rolls on <a> click $("#Rolegroup a").click(function () { var currentli = $(this).parent(); $(this).remove(); var foption = $('#AddRole option:first'); $('#AddRole').append('<option>' + currentli.text() + '</option>'); var soptions = $('#AddRole option:not(:first)').sort(function (a, b) { return a.text == b.text ? 0 : a.text < b.text ? -1 : 1 }); $('#AddRole').html(soptions).prepend(foption); currentli.remove(); }); });删除锚点时，它应该从<li>删除<li>并将文本重新添加到下拉列表中。

无法删除动态附加的<li>

0 个答案: