DOM에서 DOM 요소를 제거하고 메모리에서 제거하는 방법?

Question

jquery 'remove'를 사용하여 DOM에서 요소를 삭제합니다. 문제는 메모리에서 삭제되지 않는다는 것입니다. 나는 'purge'와 'deleteData'를 DOM과 메모리에서 삭제하려고 시도하지만, 여전히 운이 없다.

아래의 디버깅 스크립트는 문제를 강조 표시합니다. 메모리 삭제를 확인하기 위해 이전/이후 합계를 콘솔에 게시합니다.

[x]를 클릭하면 행이 삭제되지만 데이터를 저장하려고해도 메모리에 남아 있습니다. 주석

는 이러한 솔루션을

   // discardElement(current_row) ; 
       // jQuery.removeData(current_row) ; 
       // $.removeData(current_row) ; 
       // current_row.removeData(); 
       //purge(current_row)  ; 
       // $.purge(current_row)  ; 
       // $.removeData(current_row) ; 

없음 행운 중 하나 ... 내가 무엇을 시도했다 몇 가지되지 않습니다 : How to clear DOM elements created with jQuery from memory?

Removing SVG from dom and memory

나는이에서 봤는데 몇 시간 남았습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

my code in jsfiddle

HTML 코드 :

<div data-role="page"> 
<!-- /header --> 

<div data-role="content"> 

    <!-- entry points table --> 
    <section id="entry_points_section"> 
     <div class="section_titles">Enter market entry points:</div> 
     <div class="input_fields_wrap"> 
      <table class="responsive" id="input_entries_table"> 
       <tbody> 
       <tr> 
        <th scope="col" id="entry_price_column">Entry price</th> 
        <th scope="col">Percent</th> 
        <th scope="col">Order amount</th> 
        <th scope="col">Capital value</th> 
        <th scope="col">Breakeven</th> 
        <th scope="col"></th> 
       </tr> 
       <tr> 
        <td width="17%" style="min-width:3em"><input type="number" class="entryprice_class" 
                   name="entryprice" size="5" 
                   min="0" placeholder="0" value="500"></td> 
        <td style="min-width:2em"><input type="range" name="slider-fill_1" class="entry_percent" 
                id="entry_percent_1" value="0" placeholder="0%" min="0" 
                max="100" 
                data-highlight="true"/></td> 
        <td width="17%" style="min-width:3em"><input type="text" class="order_amount" 
                   name="order_amount_name" size="5" min="0" 
                   placeholder="0" length="10px" disabled></td> 
        <td width="17%" style="min-width:3em"><input type="text" class="capital_value" 
                   name="capital_value" size="5" min="0" 
                   placeholder="0" disabled></td> 
        <td width="17%" style="min-width:3em"><input type="text" class="breakeven" name="breakeven" 
                   size="5" min="0" placeholder="0" disabled></td> 
        <td width="28px" style="display:none"> 
         <button data-role="button" data-icon="delete" data-iconpos="notext" data-inline="true"> 
          &nbsp;</button> 
        </td> 
       </tr> 

       <tr> 
        <td width="17%" style="min-width:3em"><input type="number" class="entryprice_class" 
                   size="5" 
                   min="0" placeholder="400" value="400"></td> 
        <td style="min-width:2em"><input type="range" name="slider-fill" class="entry_percent" 
                value="0" placeholder="0%" min="0" 
                max="100" 
                data-highlight="true"/></td> 
        <td width="17%" style="min-width:3em"><input type="text" class="order_amount" 
                   name="order_amount" size="5" min="0" 
                   placeholder="0" length="10px" disabled></td> 
        <td width="17%" style="min-width:3em"><input type="text" class="capital_value" 
                   name="capital_value" size="5" min="0" 
                   placeholder="0" disabled></td> 
        <td width="17%" style="min-width:3em"><input type="text" class="breakeven" name="breakeven" 
                   size="5" min="0" placeholder="0" disabled></td> 
        <td width="28px"><a href="#" class="remove_field"> 
         <button data-role="button" data-icon="delete" data-iconpos="notext" data-inline="true"> 
          &nbsp;</button> 
        </a></td> 
       </tr> 

       <tr> 
        <td width="17%" style="min-width:3em"><input type="number" class="entryprice_class" 
                   size="5" 
                   min="0" placeholder="0" value="300"></td> 
        <td style="min-width:2em"><input type="range" name="slider-fill" class="entry_percent" 
                value="0" placeholder="0%" min="0" 
                max="100" 
                data-highlight="true"/></td> 
        <td width="17%" style="min-width:3em"><input type="text" class="order_amount" 
                   name="order_amount" size="5" min="0" 
                   placeholder="0" length="10px" disabled></td> 
        <td width="17%" style="min-width:3em"><input type="text" class="capital_value" 
                   name="capital_value" size="5" min="0" 
                   placeholder="0" disabled></td> 
        <td width="17%" style="min-width:3em"><input type="text" class="breakeven" name="breakeven" 
                   size="5" min="0" placeholder="0" disabled></td> 
        <td width="28px"><a href="#" class="remove_field"> 
         <button data-role="button" data-icon="delete" data-iconpos="notext" data-inline="true"> 
          &nbsp;</button> 
        </a></td> 
       </tr> 
       <tr> 
        <td width="17%" style="min-width:3em"><input type="number" class="entryprice_class" 
                   name="entryprice" size="5" 
                   min="0" placeholder="0" value="200"></td> 
        <td style="min-width:2em"><input type="range" name="slider-fill" class="entry_percent" 
                value="0" placeholder="0%" min="0" 
                max="100" 
                data-highlight="true"/></td> 
        <td width="17%" style="min-width:3em"><input type="text" class="order_amount" 
                   name="order_amount" size="5" min="0" 
                   placeholder="0" length="10px" disabled></td> 
        <td width="17%" style="min-width:3em"><input type="text" class="capital_value" 
                   name="capital_value" size="5" min="0" 
                   placeholder="0" disabled></td> 
        <td width="17%" style="min-width:3em"><input type="text" class="breakeven" name="breakeven" 
                   size="5" min="0" placeholder="0" disabled></td> 
        <td width="28px"><a href="#" class="remove_field"> 
         <button data-role="button" data-icon="delete" data-iconpos="notext" data-inline="true"> 
          &nbsp;</button> 
        </a></td> 
       </tr> 

       <tr> 
        <td width="17%" style="min-width:3em"><input type="number" class="entryprice_class" 
                   name="entryprice" size="5" 
                   min="0" placeholder="0" value="100"></td> 
        <td style="min-width:2em"><input type="range" name="slider-fill" class="entry_percent" 
                value="0" placeholder="0%" min="0" 
                max="100" 
                data-highlight="true"/></td> 
        <td width="17%" style="min-width:3em"><input type="text" class="order_amount" 
                   name="order_amount" size="5" min="0" 
                   placeholder="0" length="10px" disabled></td> 
        <td width="17%" style="min-width:3em"><input type="text" class="capital_value" 
                   name="capital_value" size="5" min="0" 
                   placeholder="0" disabled></td> 
        <td width="17%" style="min-width:3em"><input type="text" class="breakeven" name="breakeven" 
                   size="5" min="0" placeholder="0" disabled></td> 
        <td width="28px"><a href="#" class="remove_field"> 
         <button data-role="button" data-icon="delete" data-iconpos="notext" data-inline="true"> 
          &nbsp;</button> 
        </a></td> 
       </tr> 


       </tbody> 
      </table> 

     </div> 
    </section> 


</div> 

자바 스크립트 코드

:

$(document).ready(function() { 

guiController(); // load GUI controller 
views(); // load views 

// ******************************** GUI CONTROLLER ****************************** 
function guiController() { 

    entriesAddDeleteController(); // watches for add or delete entry events and triggers views functions to add/delete dom 
    // ================ entries add/delete ================= 
    function entriesAddDeleteController() { 
     // delete entry button clicked 
     var wrapper = $('.input_fields_wrap'); //Fields wrapper 
     $(wrapper).on("click", ".remove_field", function (e) { //user click on remove text 
      e.preventDefault(); 
      var current_row = $(this); 
      deleteEntry(e, current_row); 

      // discardElement(current_row) ;  
      // jQuery.removeData(current_row) ;     
      // $.removeData(current_row) ; 
      // current_row.removeData(); 
      //purge(current_row)  ; 
      // $.purge(current_row)  ; 
      // $.removeData(current_row) ; 

      // for debugging, sum totals 
      entries_prices = $('.entryprice_class'); 

      var sum_of_all_entries = 0; 

      // get total sum of entry prices (to calculate entries) 
      entries_prices.each(function() { 
       entry_price = parseFloat(this.value); 
       sum_of_all_entries = sum_of_all_entries + entry_price; 
      }); 

      alert("Totals: " + sum_of_all_entries); 
      console.log('Total: ' + sum_of_all_entries); 
     }); 
    } 
} 


// ************************************ VIEWS *********************************** 
function views() { 
    // ================ delete entry ================ 
    deleteEntry = function deleteEntry(e, current_row) { 
     e.preventDefault(); 

     current_row.parent().parent().fadeOut(400, 0, function() { 
      current_row.remove(); 
     }); 
    }; 
} 
}); 

Answer 1

주의해야 할 두 가지 사항을 발견 할 때. epascarello가 말한대로

1. , 작업이 비동기, 그래서 당신은 요소가 제거 된 전에 체크 를 실행하고 있습니다.

2. current_row 변수는 .remove()으로 전화 할 때마다 걸려있는 것이므로 전혀 설정하지 않을 것입니다.

이 작동 더 나은 :

$(wrapper).on("click", ".remove_field", function (e) { //user click on remove text 
    e.preventDefault(); 

    $(this).parent().parent().fadeOut(400, 0, function() { 
     // don't use current_row inside here 
     $(this).remove(); 

     // do everything in the callback 

     // for debugging, sum totals 
     entries_prices = $('.entryprice_class'); 

     var sum_of_all_entries = 0; 

     // get total sum of entry prices (to calculate entries) 
     entries_prices.each(function() { 
      entry_price = parseFloat(this.value); 
      sum_of_all_entries = sum_of_all_entries + entry_price; 
     }); 

     alert("Totals: " + sum_of_all_entries); 

     console.log('Total: ' + sum_of_all_entries); 
    }); 
}); 

Fiddle

당신은 당신이 그것을 제거하기 전에, 당신이 변수를 설정할 수 있습니다,하지만 당신은 당신이 그것을 설정 확인해야합니다 current_row에 많은 일을했다 경우 null로되거나 범위를 벗어납니다 (즉,제대로 작동하려면 fadeOut 콜백 전에 클릭 기능 종료)를 실행합니다

$(wrapper).on("click", ".remove_field", function (e) { //user click on remove text 
    e.preventDefault(); 
    var current_row = $(this); 

    current_row.parent().parent().fadeOut(400, 0, function() { 
     // you still can't use current_row here 
     $(this).remove(); 

     // do everything in the callback 

     // for debugging, sum totals 
     entries_prices = $('.entryprice_class'); 

     var sum_of_all_entries = 0; 

     // get total sum of entry prices (to calculate entries) 
     entries_prices.each(function() { 
      entry_price = parseFloat(this.value); 
      sum_of_all_entries = sum_of_all_entries + entry_price; 
     }); 

     alert("Totals: " + sum_of_all_entries); 

     console.log('Total: ' + sum_of_all_entries); 
    }); 

    // clear current_row 
    current_row = null; 
}); 

Fiddle

Answer 2

deleteEntry = function deleteEntry(e, current_row) { 
    e.preventDefault(); 

    current_row.parent().parent().fadeOut(400, 0, function() { 
     current_row.remove(); 
    }); 
}; 

문제는 페이드 아웃 비동기 사실입니다. 페이드가 완료 될 때까지 요소를 제거하지 않습니다. 즉, 계산을 할 때 요소가 그대로 남아 있습니다.

당신이 할 수있는 일은 요소를 추가 할 때 요소와 셀렉터에 "삭제 된"클래스를 추가하는 것입니다.

deleteEntry = function deleteEntry(e, current_row) { 
    //e.preventDefault(); <-- makes no sense 
    current_row.find('.entryprice_class').addClass("deleted"); 
    current_row.parent().parent().fadeOut(400, 0, function() { 
     current_row.remove(); 
    }); 
}; 

당신은 요소

var entries_prices = $('.entryprice_class').not(".deleted"); 

Answer 3

이 동료, current_row.parent().parent().remove();을 시도, 그것은 나를 위해 일한, 나는 fiddle demo

, 당신이 뭔가를 잘못 삭제 된 것 같아요

Answer 4

요소를 페이드 아웃하면 (즉시 제거하는 것과 반대), 페이드가 완료 될 때까지 계산을 지연시키는 것이 가장 좋습니다. 이렇게하려면 함수 서명을 콜백을 허용하도록 변경하십시오.

deleteEntry = function deleteEntry(current_row, callback) { 
    current_row.parent().parent().fadeOut(400, 0, function() { 
     current_row.remove(); 
     callback(); 
    }); 
}; 

콜백은 행이 제거 된 후에 호출됩니다.

deleteEntry(current_row, function() { 
    // for debugging, sum totals 
    entries_prices = $('.entryprice_class'); 

    var sum_of_all_entries = 0; 

    // get total sum of entry prices (to calculate entries) 
    entries_prices.each(function() { 
     entry_price = parseFloat(this.value); 
     sum_of_all_entries = sum_of_all_entries + entry_price; 
    }); 

    alert("Totals: " + sum_of_all_entries); 

    console.log('Total: ' + sum_of_all_entries);  
});