Delete button is not able to delete buttons. It is responsive in the console but nothing else

i’m having trouble using my delete button with my code. Instead of deleting an object, it creates a new one. code is under render items function. i’ve tried several things but it seems like my biggest problem is the placement of the rederItems function in the if statement. I also added the html to show you how that looks like too. Thanks!

//  selectors 
var nameOfItem = document.getElementById("nameOfItem");
var saveOfItem = document.getElementById("nameOfItem");

var shoppingList = document.getElementById("shoppingListContainer");

var nameArray = ["tea","bread","rice"]
// var nameArray = []
var setCart = [];
var getIngredientsForCart = localStorage.getItem
var emptyListText = document.getElementById("emptyList")
var removeButton = document.getElementById('removeItem');
var saveItems = document.getElementById("saveItems");
var cart = document.getElementById("shoppingListContainer")

cart.style.visibility = 'hidden';
saveItems.style.visibility = 'hidden'

saveItems.addEventListener('click', function() {
    console.log('saved')
    setCart.push(entry);
    localStorage.setItem('cart', JSON.stringify(newArray));
});


/*

<li class="list-group-item" id="numberOfItems">1</li>
            <li class="list-group-item" id="nameOfItem"></li>
            <li class="list-group-item" id="removeItem"></li>

*/



// get from local storage
// var food = JSON.parse(localStorage.getItem("Ingredients"))
// console.log(food)
// nameArray = food



// --------------------------------
// render Item function
// --------------------------------
function renderItems() {
    for (i = 0; i < nameArray.length; i++) {
        var row = document.createElement("div");
        row.setAttribute("class", "row");


        var col2 = document.createElement("div");
        var col3 = document.createElement("div");


        col2.setAttribute("class", "col-8 item-name");
        col3.setAttribute("class", "col-2 item-delete");

        var newButton = document.createElement('button');
        newButton.textContent = 'Delete';
        newButton.setAttribute("data-item-idx", i);
        newButton.addEventListener('click', function(event){
            console.log(event.target.dataset.itemIdx)
            var selectedItem = parseInt(event.target.dataset.itemIdx);
            
            
            if(nameArray.splice(selectedItem, 1)){
                console.log(nameArray)
                renderItems()
            }
        })
        

        col2.textContent = nameArray[i];
        col3.appendChild(newButton);


        row.appendChild(col2);
        row.appendChild(col3);

        shoppingList.appendChild(row);
    }
}


// --------------------------------
// shopping Cart function
// --------------------------------
function shoppingCart() {
    emptyListText.style.visibility = 'hidden';
    cart.style.visibility = 'visible';
    saveItems.style.visibility = 'visible'
    renderItems()
}



   


// execute Function
shoppingCart()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet" />

    <title>Meal Plan</title>
    <link rel="stylesheet" href="../css/shoppinglist.css">
</head>

<body>
    <div>
        <h1>Shopping List</h1>
        <a href="../../index.html">search recipes</a>
    </div>
    <h1 id="emptyList">Cart is Empty :(</h1>
    <section id="shoppingListContainer" class="container">


    </section>
    <button id="saveItems">Save Items</button>
</body>
<!-- <script src="/projects/mealPlan/assets/js/script.js"></script> -->
<script src="../js/shoppingList.js"></script>

</html>

Answer

You are calling renderItems() again on delete but you are never actually clearing the existing rendered html.

Simply adding shoppingList.innerHTML = ""; to the start of the renderItems() function will clear the html each time render runs.

Advertisement

Answer