Question

我看不出为什么我不能用Jquery删除一些动态内容。

HTML

<div class="col-md-12" id="formCopy">
    <!--FORM-->
    <form class="form form-inline well well-sm" id="copyForm">
        <!--SELECT objNr-->
        <select id="selectObjNr" style="width: 150px;">
            <option></option>

这是我的JS：

//ObjNr on CHANGE
$(document).on('change', '#objNr', function(){
    //Remove old element
    $('.elNr').remove();

    //Grab selected objNR
    objNr = $(this).val();

    //Get elements for object
    $.ajax({
        url: 'get.php',
        method: 'post',
        data: {objNr: objNr},
        success: function(result){
            //INSERT new element to DOM
            $(result).insertAfter('#objNr);

            //ENABLE SELECT2
            $( "#elNr").select2({
            });
        }
    })
})

我也尝试过：

$('#objNr').on('change', function(){
    $(document).find('#elNr').remove();
    $(this).siblings('.elNr').remove();

所以，我做了一个jsfiddle进行一些测试..
问题是小提琴的工作正确。
https://jsfiddle.net/86Lrdakc/

如果我console.log($('#elNr'))我可以看到动态元素。

我缺少什么？
唯一的区别是我如何创建动态元素。

PHP

//SELECT2
echo '<select id="elNr" class="elNr" style="width: 150px;">';
    //OPTIONS
    while($row = $stmt->fetch()){
        echo '<option value="'.$row['element_nr'].'">'.$row['element_nr'].'</option>';
    }
//END SELECT2
echo '</select>';

更新

//Find old dynamic element
$('#objNr').on('change', function(){
    old = $(this).siblings('#elNr'); console.log(old)

控制台：[select＃elNr.elNr，prevObject：n.fn.init [1]，context：select＃objNr]

动态内容：

<select id="elNr" class="elNr" style="width: 150px;"><option value="001">001</option><option value="003">003</option><option value="004">004</option><option value="005">005</option><option value="006">006</option><option value="007">007</option><option value="008">008</option><option value="009">009</option><option value="010">010</option><option value="011">011</option><option value="012">012</option><option value="013">013</option><option value="014">014</option><option value="015">015</option><option value="016">016</option><option value="017">017</option><option value="018">018</option></select>

似乎插件“SELECT2”将我的选择转换为跨度？！

<span class="select2 select2-container select2-container--default" dir="ltr" style="width: 150px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-owns="select2-selectElNr-results" aria-labelledby="select2-selectElNr-container"><span class="select2-selection__rendered" id="select2-selectElNr-container" title="001">001</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>

解

$('#objNr').on('change', function(){
    //Find old dynamic element
    oldEl = $(this).siblings('#elNr');
    if(oldEl.length){
        //Remove old SELECT2 elNr
        $(".elNr").select2('destroy');
        $(".elNr").remove();
    }

Answer 1

很难说没有更多的代码，但也许你已经把你的JS放在了页面的顶部？如果是这种情况，则在设置事件时该元素不存在。

您可以在正文上设置事件，以确保考虑动态元素。

$('body').on('change', '#ObjNr', function() {...});

Answer 2

问题在于Jquery插件SELECT2 我必须首先销毁它，然后删除选择。

{{1}}

无法删除动态内容（Jquery）

2 个答案: