Question

我正在尝试使用jQuery删除功能删除选择框但它不起作用。选择框本身是动态生成的。如果用户想要在添加后删除下拉列表，我想删除相同的选择框。我的代码是：

    $("#dltElement").click(function() {
        $("#idSelect").remove();   
    });

添加选择框的代码：

$(document).ready(function() {
    var count = 3;
    $("#btnCompare").click(function() {
        if (count > 4) {
            alert("Only 4 options are allowed");
            return false;
        }
        $("#form-group").append(
            "<select name='idSelect" + count + "' id='idSelect" + count + "'>" +
            "<option>--Select Product" + counter + "--</option>" +
            '<option value="p1">Product 1</option>' +
            '<option value="p2">Product 2</option>' +
            "</select>" + '<input type="button" value=" - " id="dltElement' + count + '" class="btn-minus pull-left" />'
        );
        count++;
    }); // Script for adding dropdown dynamically

});

Answer 1

#idSelect不存在您必须使用#idSelect0或#idSelect1 ...依此类推。而不是您可以使用#form-group上的事件委派来查找事件，以删除最接近输入按钮的最接近元素，或者在您的情况下选择兄弟选择。这个~是一个兄弟选择器，将选择兄弟选择。

一个好主意是在您的选择中添加一个类并使用它，因为我们已经使用您的类.btn-minus来监听点击事件，（如果您有多个选择全部将被选中））

$("form-group").on('click', '.btn-minus' , function() {
     $(this).find('~select').remove();   
});

找到兄弟选择并删除

编辑2

我使用.closest()添加了一个代码段你可以查看一下。最近将尝试使用类容器找到父div，并删除选择和减号按钮

＆＃13;

$(document).ready(function() {
    
    $("#form-group").on('click', '.btn-minus' , function() {
       $(this).closest('.container').remove();   
    });
    $("#btnCompare").click(function() {
        var count = $("#form-group > div.container").length;
        if (count >= 4) {
            alert("Only 4 options are allowed");
            return false;
        }
        //you need to have data-id="number" for all div.container, add class container and data-id to all the divs having select and button
        var label = $("#form-group > div.container").last().data('id')*1+1;
        $("#form-group").append(
            "<div class=container data-id="+label+"><select name='idSelect" + label + "' id='idSelect" + label + "'>" +
            "<option>--Select Product" + label + "--</option>" +
            '<option value="p1">Product 1</option>' +
            '<option value="p2">Product 2</option>' +
            "</select>" + ' <input type="button" value=" - " id="dltElement' + label + '" class="btn-minus pull-left" /></div>'
        );
        
    }); // Script for adding dropdown dynamically

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="form-group">
  <input type=button id=btnCompare value=btnCompare />
  <div class="container" data-id="1">
    <select id="idSelect1" name="idSelect1">
      <option>--Select Product1--</option>
      <option value="p1">Product 1</option>
      <option value="p2">Product 2</option>
    </select>
    <input disabled type="button" class="btn-minus pull-left" id="dltElement1" value=" - ">
  </div>
  
  <div class="container" data-id="2">
    <select id="idSelect2" name="idSelect2">
      <option>--Select Product2--</option>
      <option value="p1">Product 1</option>
      <option value="p2">Product 2</option>
    </select>
    <input disabled type="button" class="btn-minus pull-left" id="dltElement2" value=" - ">
  </div>
</div>

＆＃13;

编辑3：

请查找更新的代码段。你需要有data-id =＆＃34; number＆＃34;对于所有div.container，将class container和data-id添加到具有select和button的所有div。

很难得到你想要的东西，因为你也可以从中间删除。您可以拥有一系列已删除的对象，并在每次删除或添加时对其进行更新。在这段代码中，我添加了1和2的disbaled input delete，以便你可以添加和删除其他2.你可以玩逻辑。

它计算DOM中div的数量，然后检查您是否尝试添加超过限制，然后选择最后添加到DOM中并递增data-id以将其用作下一个select <的标签< / p>

Answer 2

目前您使用的是＆＃34; direct＆＃34;绑定，它只会附加到代码进行事件绑定调用时页面上存在的元素。

在动态生成元素或操作选择器（如删除和添加类）时，需要使用Event Delegation委托事件方法.on()。

即

$(document).on('event','selector',callback_function)

实施例

正如你已经定义了CSS类，使用它来获取select元素并执行删除操作。

$("#form-group").on('click', ".btn-minus", function(){
    $(this).prev('select').remove();
});

$.fn.prev()

获取匹配元素集中每个元素的前一个兄弟，可选择由选择器过滤。

Answer 3

您要为<select>元素分配一个以数字结尾的ID，如下所示：

<select name='idSelect"+count+"' id='idSelect"+count+"'>

这意味着你最终得到这样的东西：

<select name="idSelect1" id="idSelect1">
...
</select>

所以选择器$("#idSelect")永远不会打它，除非它包含那个数字。

添加按钮的部分：

'<input type="button" value=" - " id="dltElement' + count + '" class="btn-minus pull-left" />

有同样的问题。

实现目标的简单方法（尽管可能不是最好的方法）是：

function removeSelect(evt)
{
   var selectBox = $(evt.currentTarget).parents(".group").find("select");
   //do with select box as you will
}

$(document).ready(function() {
    var count = 3;
    $("#btnCompare").click(function() {
        if (count > 4) {
            alert("Only 4 options are allowed");
            return false;
        }
        $("#form-group").append(
            "<div class='group'>
            "<select name='idSelect" + count + "' id='idSelect" + count + "'>" +
            "<option>--Select Product" + counter + "--</option>" +
            '<option value="p1">Product 1</option>' +
            '<option value="p2">Product 2</option>' +
            "</select>" + '<input type="button" value=" - " id="dltElement' + count + '" class="btn-minus pull-left" onclick="removeSelect(event)" /> </div>'
        );
        count++;
    }); // Script for adding dropdown dynamically

});

尝试使用jQuery remove（）函数删除Select框

3 个答案:

编辑2

编辑3：