如何从DOM和内存中删除DOM元素？

时间：2014-12-01 13:15:39

标签： 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)    ;

这些解决方案也没有运气： How to clear DOM elements created with jQuery from memory?

Removing SVG from dom and memory

我已经在这几个小时了。我做错了什么？

my code in jsfiddle

HTML code：

<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 个答案:

答案 0 :(得分：1)

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

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

问题在于fadeOut是异步的。在淡入淡出完成之前，您不会删除元素。这意味着当你进行计算时，元素仍然存在。

你可以做的是添加一个类＆＃34;删除＆＃34;在添加时忽略那些元素和选择器。 

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

答案 1 :(得分：1)

有两点需要注意。

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

  2. 当您致电current_row时，.remove()变量就是这个变量，所以我根本不会设置它。

    3. 这更好用：

    $(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

答案 2 :(得分：1)

鉴于你正在淡出元素（而不是立即删除它），最好延迟计算直到淡入淡出完成。为此，请更改函数签名以接受回调：

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

答案 3 :(得分：0)

尝试这个伴侣，current_row.parent().parent().remove();，它对我有用，我想你是在删除错误，  fiddle demo

相关问题
最新问题