堆棧內存溢出
  簡體   English   中英

如何從DOM和內存中刪除DOM元素？

[英]How to Remove DOM Element From DOM and From Memory?

 原文  2014-12-01 13:15:39  2   4    javascript/ jquery/ html5/ dom

問題描述

我正在使用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)    ;

這些解決方案也沒有運氣： 如何從內存中清除使用jQuery創建的DOM元素？

從dom和內存中刪除SVG

我已經在這里呆了幾個小時了。 我究竟做錯了什么？

我在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>

JavaScript代碼： 

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

4 個解決方案

解決方案1
 1  2014-12-01 13:42:11

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

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

問題在於fadeOut是異步的。 在淡入淡出之前，您不會刪除元素。 這意味着當您進行計算時，該元素仍然存在。

您可以做的是在添加時將“已刪除”的類添加到元素中，並在選擇器中添加它們以忽略它們。 

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");

解決方案2
 1 已采納  2014-12-01 13:50:20

有兩件事要注意。

  1. 正如epascarello所說，該操作是異步的，因此您要在刪除元素之前運行檢查。

  2. 當您調用.remove() ， current_row變量就是掛了的東西，因此我根本不會設置它。

這樣效果更好： 

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

小提琴

如果在刪除current_row之前對它做了很多操作，則可以設置該變量，但是必須確保將其設置為null或它超出范圍（即click函數退出），然后再運行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;
});

小提琴

解決方案3
 1  2014-12-01 13:56:48

鑒於您正在淡出該元素（而不是立即刪除它），最好將計算延遲到淡入淡出之后。 為此，將函數簽名更改為接受回調： 

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

解決方案4
 0  2014-12-01 13:53:56

試試這個伴侶， current_row.parent().parent().remove(); ，它對我有用，我想您正在刪除錯誤的小提琴演示

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 從內存中刪除HTML元素（DOM節點） 從 DOM 中刪除元素 如何從指令中查找和刪除DOM元素？ 如何使用 React 從 DOM 中刪除 HTML 元素 如何從DOM元素中刪除事件偵聽器？ 從數組中刪除 DOM 元素 如果dom元素具有指向關閉的指針，那么如果我從頁面中刪除dom元素，是否會導致內存泄漏？ 如何從內部DOM中獲取元素。（帶DOM的DOM） 當我們從DOM中添加/刪除元素時的DOM行為 如何避免CSS動畫的延遲從DOM中刪除元素？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM