如何从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)    ;

这些解决方案也没有运气： 如何从内存中清除使用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();
        });
    };
}
});

Answer 1

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

Answer 2

有两件事要注意。

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

小提琴

Answer 3

鉴于您正在淡出该元素（而不是立即删除它），最好将计算延迟到淡入淡出之后。 为此，将函数签名更改为接受回调：

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

Answer 4

试试这个伴侣， current_row.parent().parent().remove(); ，它对我有用，我想您正在删除错误的小提琴演示