javascript - 如何从 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>

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

Answer 1

有两点需要注意。

1. 正如 epascarello 所说，该操作是异步的，因此您在元素被删除之前运行检查。

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