2016-09-26 110 views
0

我看不出爲什麼我無法用Jquery刪除一些動態內容。
無法刪除動態內容(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>'; 

UPDATE

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

控制檯:[選擇#elNr.elNr,prevObject:n.fn.init [1],上下文:選擇#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> 

SOLUTION

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

可以請您分享,輸出動態元素? – vural

+2

檢查初始化後,select2插件生成的HTML標記。我想你會得到你的答案。你不刪除你期望的元素 –

+0

@vural檢查更新! –

回答

0

問題出在JQuery插件SELECT2上。
我必須先摧毀它,然後刪除選擇。

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

很難說沒有更多的代碼,但也許你已經把你的JS在頁面頂部?如果是這種情況,則在設置事件時該元素不存在。

您可以在身體上設置事件以確保將動態元素考慮在內。

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

不,那不是我的問題... –