尝试使用jQuery remove()函数删除选择框

Trying to delete Select box using jQuery remove() function

本文关键字：函数 删除 选择 remove jQuery      更新时间：2023-09-26

我试图使用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
});

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

一个好主意是为你的选择添加一个类，并使用它来代替我们使用你的类.btn-minus来监听点击事件，(如果你有多个选择，所有将被选中)

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

查找同级选择并删除

编辑2

我使用.closest()添加了一个片段，您可以查看它。close将尝试找到带有类容器的父div，并删除选择和减号按钮

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

编辑3:

请找到更新的片段。你需要有data-id="number"为所有div.container，添加类容器和data-id到所有div有选择和按钮。

很难得到你想要的，因为你也可以从中间删除。你可以有一个被删除对象的数组并在每次删除或添加时更新它。在这段代码中，我为1和2添加了禁用的输入删除，以便您可以添加和删除其他2。你可以随意使用逻辑。

它计算DOM中的div的数量，然后检查您是否试图添加超过限制，然后选择DOM中最后添加的并增加data-id以将其用作下一个选择

的标签

目前你正在使用的是所谓的"直接"绑定，它只会附加到在你的代码调用事件绑定时存在于页面上的元素。

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

。

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

当您已经定义了CSS类时，使用the来获取select元素并执行移除操作。

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

$ .fn.prev ()

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

您正在为<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
});
相关文章：