JS 實作 #11 | 刪除預算 UI 處理;el.parentNode.removeChild(el)

刪除按鈕裝好了 eventListener,資料也處理好了,最後一步就是將其從 UI 中移除。

開始實作

1. 在 UI CONTROLLER 裡新增一個公開方法 deleteListItems(),用來刪除 UI 裡的預算資料。

// UI CONTROLLER
var UIController = (function() {

    var DOMstrings = {
        inputType: '.add__type',
        inputDescription: '.add__description',
        inputValue: '.add__value',
        inputBtn: '.add__btn',
        incomeContainer: '.income__list',
        expenseContainer: '.expenses__list',
        budgetLabel: '.budget__value',
        incomeLabel: '.budget__income--value',
        expensesLabel: '.budget__expenses--value',
        percentageLabel: '.budget__expenses--percentage',
        container: '.container'
    };

    return {
        getInput: function() {
            ...
        },
        getDOMstrings: function() {
            return DOMstrings;
        },
        addListItem: function(obj, type) {
						...
        },
        **deleteListItems: function(selectorID) {

        },**
        clearFields: function () {
            ...
        },
        displayBudget: function(obj) {
            ...
        }
    };

})();
// GLOBAL APP CONTROLLER
var controller = (function(budgetCtrl, UICtrl){

    var setupEventListeners = function() {
        ...
    };
    var updateBudget = function() {
				...
    };

    var ctrlAddItem = function() {
				...        
    }

    var ctrlDeleteItem = function(event) {
        var itemID, splitID, type, ID;
        itemID = event.target.parentNode.parentNode.parentNode.parentNode.id;
        if (itemID) {
             
            splitID = itemID.split("-");
            type = splitID[0];
            ID = parseInt(splitID[1]);

            // 1. delete the item from the data structure
            budgetCtrl.deleteItem(type, ID);

            // 2. delete the item from the UI
            **UICtrl.deleteListItems(itemID);**

            // 3. update and show the new budget
        }
    }
    
    return {
        ...
    }
})(budgetController, UIController);

controller.init();

2. Javascript 裡的 DOM 刪除需要從指定 DOM 元件先往上一層再往下找此元件,el.parentNode.removeChild(el)

// UI CONTROLLER
var UIController = (function() {

    var DOMstrings = {
        inputType: '.add__type',
        inputDescription: '.add__description',
        inputValue: '.add__value',
        inputBtn: '.add__btn',
        incomeContainer: '.income__list',
        expenseContainer: '.expenses__list',
        budgetLabel: '.budget__value',
        incomeLabel: '.budget__income--value',
        expensesLabel: '.budget__expenses--value',
        percentageLabel: '.budget__expenses--percentage',
        container: '.container'
    };

    return {
        getInput: function() {
            ...
        },
        getDOMstrings: function() {
            return DOMstrings;
        },
        addListItem: function(obj, type) {
						...
        },
        **deleteListItems: function(selectorID) {
						var el = document.getElementById(selectorID);
            el.parentNode.removeChild(el);
        },**
        clearFields: function () {
            ...
        },
        displayBudget: function(obj) {
            ...
        }
    };

})();

3. 最後重新執行預算加總就完成了

// GLOBAL APP CONTROLLER
var controller = (function(budgetCtrl, UICtrl){

    var setupEventListeners = function() {
        ...
    };
    var updateBudget = function() {

        // 5-1. Calcuate the budget
        budgetCtrl.calculateBudget();

        // 5-2. Return the budget
        var budget = budgetCtrl.getBudget();

        // 5-3  Display the budget on the UI
        UICtrl.displayBudget(budget);
    };

    var ctrlAddItem = function() {
       ...
    }

    var ctrlDeleteItem = function(event) {
        var itemID, splitID, type, ID;
        itemID = event.target.parentNode.parentNode.parentNode.parentNode.id;
        if (itemID) {
           
            splitID = itemID.split("-");
            type = splitID[0];
            ID = parseInt(splitID[1]);

            // 1. delete the item from the data structure
            budgetCtrl.deleteItem(type, ID);

            // 2. delete the item from the UI
            UICtrl.deleteListItems(itemID);

            **// 3. update and show the new budget
            updateBudget();**
        }
    }
    
    return {
        ...
    }
})(budgetController, UIController);

controller.init();
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f451367f-d8d2-4671-8df8-6a739f4aefc4/_2020-03-31_21.37.43.jpg

Zeen is a next generation WordPress theme. It’s powerful, beautifully designed and comes with everything you need to engage your visitors and increase conversions.