无法添加和删除动态生成的下拉菜单答案

【问题标题】：Unable to add and remove dynamically generated dropdown无法添加和删除动态生成的下拉菜单
【发布时间】：2015-10-09 05:12:00
【问题描述】：

我想生成这种格式的动态下拉列表：

 <div class="row"> //first row containing 2 dynamic Dropdown 
                <div class="col-md-3 col-xs-12 col-sm-12  form-group">
                 <select id="field1">
                </div>
                <div class="col-md-3 col-xs-12 col-sm-12  form-group">
                 <select id="field1">
                </div>
 </div>
 <div class="row"> //second row containing 2 dynamic Dropdown 
                <div class="col-md-3 col-xs-12 col-sm-12  form-group">
                 <select id="field2">
                </div>
                <div class="col-md-3 col-xs-12 col-sm-12  form-group">
                 <select id="field2">
                </div>
 </div>

等等……

输出格式：

注意：我想删除每行末尾的按钮

 var cnt = 1;
function AddRow() {
        var fieldWrapper1 = $("<div class='col-md-4 col-xs-12 col-sm-12' id='field" + cnt + "'/>");
        var fieldWrapper2 = $("<div class='col-md-4 col-xs-12 col-sm-12' id='field" + cnt + "'/>");
        var fieldWrapper3 = $("<div class='col-md-4 col-xs-12 col-sm-12' id='field" + cnt + "'/>");
        var fieldWrapper4 = $("<div class='col-md-4 col-xs-12 col-sm-12' id='field" + cnt + "'/>");
        var fName1 = $("<select class='fieldname' id='drpdownCourse" + cnt + "'  name='drpdownCourseNm" + cnt + "'  />");
        var fName2 = $("<select class='fieldname' id='drpdownSubCourse" + cnt + "'  name='drpdownSubCourseNm" + cnt + "'  />");
        var fName3 = $("<select class='fieldname' id='drpdownSubject" + cnt + "'  name='drpdownSubjectNm" + cnt + "'  />");
        var removeButton = $("<img class='remove' src='../remove.png' />");

        fieldWrapper1.append(fName1);
        fieldWrapper2.append(fName2);
        fieldWrapper3.append(fName3);
        fieldWrapper4.append(removeButton);
        $("#FieldContainer").append(fieldWrapper1);
        $("#FieldContainer").append(fieldWrapper2);
        $("#FieldContainer").append(fieldWrapper3);
        $("#FieldContainer").append(fieldWrapper4);
        cnt = cnt + 1;
    }

  $(document).on('click', "img.remove", function () {
        $(this).parent().fadeOut(1000, function () {
            var id = $(this).attr("id").substr(5);
            
            $(this).remove();
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <div class="row" id="FieldContainer">
   </div>
<a onclick="AddRow()" href="#">+ Add </a>

删除按钮也不会删除整行。当我单击删除按钮时，应该只删除整行（包含 2 个下拉菜单）。

【问题讨论】：

当前行为是什么？您实际上可以从浏览器中调试它。
@Learning，是否要添加和删除行。对吗？
您希望所有下拉菜单集都出现在 ID 为 FieldContainer 的 div 中？
您想在每次点击“添加”链接时添加 2 个下拉菜单吗？
当您在删除时使用parent() 概念时，您必须为每个选择设置删除按钮，但在单击添加时您将在末尾附加一次删除按钮。为每个选择元素添加删除按钮。检查this

标签： javascript jquery html dropdown

【解决方案1】：

你可能想这样做：

http://jsfiddle.net/4gsnewbv/

你的 JS：

.......


    fieldWrapper1.append(fName1);
    fieldWrapper2.append(fName2);
    fieldWrapper3.append(fName3);
    fieldWrapper4.append(removeButton);
    var newRow = $('<div class="row" id=""></div>');


    $(newRow).append(fieldWrapper1);
    $(newRow).append(fieldWrapper2);
    $(newRow).append(fieldWrapper3);
    $(newRow).append(fieldWrapper4);
    $("body").append(newRow); // I am assuming it will be a direct child of body. If not, use the appropriate ID or Class
......

所以每次你添加一行下拉菜单时，它都会嵌套在里面

<div class="row" id="">
    ...Your dropdowns and image goes here...
</div>

所以总的来说它看起来类似于

<body>
    <div class="row" id="">
       ...Your dropdowns and image goes here...
    </div>

    <div class="row" id="">
       ...Your dropdowns and image goes here...
    </div>

    and so on...     

</body>

然后使用 jQuery closest 选择器查找类为 row 的父级并删除该特定行。

 $(document).on('click', "img.remove", function () {
    $(this).closest(".row").fadeOut(1000, function () {  //targets the entire row of dropdowns
        var id = $(this).attr("id").substr(5);

        $(this).remove();
    });
});

编辑：如果您想在添加按钮之前添加新行：

....
   $(newRow).insertBefore($(".add-more").parent()); 
....

【讨论】：

而不是这个：$("body").append(newRow);你是否可以在我的添加按钮之前使用 insertbefore jquery 函数添加？
很抱歉打扰你，但实际上我的按钮是这样的：
+添加
。然后呢？？

【解决方案2】：

var cnt = 1;
function AddRow() {
        var fieldWrapper1 = $("<div class='col-md-4 col-xs-12 col-sm-12' id='field" + cnt + "'/>");
        var fieldWrapper2 = $("<div class='col-md-4 col-xs-12 col-sm-12' id='field" + cnt + "'/>");
        var fieldWrapper3 = $("<div class='col-md-4 col-xs-12 col-sm-12' id='field" + cnt + "'/>");
        var fieldWrapper4 = $("<div class='col-md-4 col-xs-12 col-sm-12' id='field" + cnt + "'/>");
        var fName1 = $("<select class='fieldname' id='drpdownCourse" + cnt + "'  name='drpdownCourseNm" + cnt + "'  />");
        var fName2 = $("<select class='fieldname' id='drpdownSubCourse" + cnt + "'  name='drpdownSubCourseNm" + cnt + "'  />");
        var fName3 = $("<select class='fieldname' id='drpdownSubject" + cnt + "'  name='drpdownSubjectNm" + cnt + "'  />");
        var removeButton = $("<img class='remove' src='http://icons.iconseeker.com/png/fullsize/web-development-3/action-delete-sharp-thick.png' />");

        fieldWrapper1.append(fName1);
        fieldWrapper1.append(fName2);
        fieldWrapper1.append(fName3);
  fieldWrapper1.append(removeButton.clone());
        
        $("#FieldContainer").append(fieldWrapper1);
        $("#FieldContainer").append(fieldWrapper2);
        $("#FieldContainer").append(fieldWrapper3);
        $("#FieldContainer").append(fieldWrapper4);
        cnt = cnt + 1;
    }

  $(document).on('click', "img.remove", function () {
        $(this).parent().fadeOut(1000, function () {
            var id = $(this).attr("id").substr(5);
            
            $(this).remove();
        });
    
    });
AddRow();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <div class="row" id="FieldContainer">
   </div>
<a onclick="AddRow()" href="#">+ Add </a>

【讨论】：

请看我问题中的图片
哪一部分不像你的形象？
在萤火虫中检查你的输出格式和我的输出格式
所以它不正确，您需要更改删除功能或输出格式。

【解决方案3】：

您可以使用 html 模板来添加和删除元素。

为此，您只需根据需要创建一个 html 模板。

<script type="text/template" id="rowtemplate">
        <div class="select-row row">
            <div class="col-md-3 col-xs-12 col-sm-12  form-group">
                <select id="field1"></select>
            </div>
            <div class="col-md-3 col-xs-12 col-sm-12  form-group">
                <select id="field1"></select>
            </div>
            <div>
                <a class="removeBtn">Remove</a>
            </div>
        </div>
    </script>

现在您可以简单地添加或删除每一行。

你的 add 函数会是这个样子，

<script>
    function AddRow() {
        $('#FieldContainer').append($('#rowtemplate').html());
    }
</script>

你可以看到我已经提到了模板中删除按钮的类名。所以，我们可以只处理每个移除按钮的点击事件，并移除它的 html 元素。

$(document).ready(function () {
    // click event for all remove button
    $('body').on('click', '.removeBtn', function () {
        $(this).closest('.select-row').remove();
    });
});

您可以看到使用 html 模板时添加和删除是多么简单。那你为什么要选择其他方式。

希望这会对您有所帮助。如果您有任何疑问，请发表评论。

【讨论】：

【解决方案4】：

如果您想在用户每次单击“添加”时添加带有两个下拉列表和删除按钮的行，您可以尝试以下操作。 (https://jsfiddle.net/0npzqr1a/4/)

var cnt = 1;
function AddRow() {

        var rowWrapper = $('<div class="row" id="FieldContainer"></div>');

        var fieldWrapper1 = $("<div class='col-md-4 col-xs-12 col-sm-12'/>");
        var fieldWrapper2 = $("<div class='col-md-4 col-xs-12 col-sm-12'/>");
        var fName1 = $("<select class='fieldname' id='drpdownCourse" + cnt + "'  name='drpdownCourseNm" + cnt + "'  />");
        var fName2 = $("<select class='fieldname' id='drpdownSubCourse" + cnt + "'  name='drpdownSubCourseNm" + cnt + "'  />");
        var removeButton = $("<img class='remove' src='../remove.png' />");

        fieldWrapper1.append(fName1);       
        fieldWrapper2.append(fName2);
        rowWrapper.append(fieldWrapper1);
        rowWrapper.append(fieldWrapper2);
        rowWrapper.append(removeButton);

        $("#FieldContainer").append(rowWrapper);
        cnt = cnt + 1;
    }

  $(document).on('click', "img.remove", function () {
        $(this).closest('.row').fadeOut(1000, function () {
            var id = $(this).attr("id").substr(5);

            $(this).remove();
        });
    });

  $(document).on('click', "a#add", function () {
        AddRow();
    });

还有html，

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row" id="FieldContainer">
</div>
<a id="add" href="#">+ Add </a>

【讨论】：

对不起，我忘了点击更新。你能再试一次吗？