What is the best approach to eliminate an element from the array cart using JavaScript?

Question

What is the best approach to eliminate an element from the array cart using JavaScript?

I currently have an array:

[
   0: {title: "Banana", price: 1.00, count: 2},
   1: {title: "Taco", price: 3.99, count: 1},
   2: {title: "Burrito", price: 6.50, count: 1},
   3: {title: "Soda", price: 1.25, count: 1},
]

which I display using the following code snippet:

var dataItems = "";
    for (i = 0; i < itemsArray.length; i++){
    var rand = Math.floor(Math.random()*1000)+1;
        dataItems += "<div id='"+rand+"' class='row pb-3 mx-3 mt-3' style='border-bottom:1px solid #eeeeee;'>";
        dataItems += "<div id='fs-7' class='col-2 text-center font-weight-bold quant'>";
        dataItems += itemsArray[i].count+"x";
        dataItems += "</div>";
        dataItems += "<div id='fs-7' class='col-5'>";
        dataItems += itemsArray[i].title+" "+i;
        dataItems += "</div>";
        dataItems += "<div class='col-3 pricep font-weight-bold text-right' style='color:#27c727;' id='price-item'>";
        dataItems += parseFloat(itemsArray[i].price).toFixed(2).toLocaleString()+" €";
        dataItems += "</div>";
        dataItems += "<div onclick='removeItem("+i+")' class='col-2'><img src='delete.png' style='max-height:20px;' class='img-fluid' /></div>";
        dataItems += "</div>";
    }

    $("#list-items").html(dataItems);

In the removeItem function:

function removeItem(item){
   itemsArray.splice(item,1);
}

However, when I delete an item, the position numbers of the remaining items do not update accordingly. How can I dynamically adjust and refresh the position numbers after removing an element?

Currently, my list looks like this:

2x Banana 1.00€ delete (position 0)
1x Taco 3.99€ delete (position 1)
1x Burrito 6.50€ delete (position 2)
1x Soda 1.25€ delete (position 3)

If I remove Banana, the list would appear as follows:

1x Taco 3.99€ delete (position 1)
1x Burrito 6.50€ delete (position 2)
1x Soda 1.25€ delete (position 3)

javascript arrays cart

Answer 1

Answer №1

To remove the item from the array, simply set its value to undefined using this code snippet...

function removeItem(item){
   myArray[myArray.indexOf(item)]=undefined ;
}

Answer 2

To remove the item from the array, simply set its value to undefined using this code snippet...

function removeItem(item){
   myArray[myArray.indexOf(item)]=undefined ;
}

Answer 3

Answer №2

In order to arrange items in an Array based on their position, the following code can be used.

const container = document.querySelector('#list');
const containerChanged = document.querySelector('#list2');

const appuntiFilter = [{
    title: "Banana",
    price: 1.00,
    count: 1
  },
  {
    title: "Pasta",
    price: 3.50,
    count: 1
  },
  {
    title: "Salad",
    price: 2.75,
    count: 1
  },
  {
    title: "Water",
    price: 0.79,
    count: 1
  },
];

// Display list
appuntiFilter.forEach((el, idx) => {
  const div = document.createElement('div');
  div.textContent = `${el.title}, ${idx}`;
  container.appendChild(div);
})

// Remove first item.
appuntiFilter.splice(0,1);

// Show updated list.
appuntiFilter.forEach((el, idx) => {
  const div = document.createElement('div');
  div.textContent = `${el.title}, ${idx}`;
  containerChanged.appendChild(div);
})

<div id="list">

</div>
<hr/>
<div id="list2">

</div>

Answer 4

In order to arrange items in an Array based on their position, the following code can be used.

const container = document.querySelector('#list');
const containerChanged = document.querySelector('#list2');

const appuntiFilter = [{
    title: "Banana",
    price: 1.00,
    count: 1
  },
  {
    title: "Pasta",
    price: 3.50,
    count: 1
  },
  {
    title: "Salad",
    price: 2.75,
    count: 1
  },
  {
    title: "Water",
    price: 0.79,
    count: 1
  },
];

// Display list
appuntiFilter.forEach((el, idx) => {
  const div = document.createElement('div');
  div.textContent = `${el.title}, ${idx}`;
  container.appendChild(div);
})

// Remove first item.
appuntiFilter.splice(0,1);

// Show updated list.
appuntiFilter.forEach((el, idx) => {
  const div = document.createElement('div');
  div.textContent = `${el.title}, ${idx}`;
  containerChanged.appendChild(div);
})

<div id="list">

</div>
<hr/>
<div id="list2">

</div>

Answer 5

Answer №3

If you need to remove items from the list, you can recreate it each time. This might be a costly process but is manageable if the cart doesn't contain too many items. Additionally, there's no requirement for jQuery as you can utilize DOMParser instead. Although I'm assuming the index of the item you wish to delete is the first one, you can adjust the index = null line accordingly. I trust this information proves helpful.

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <button id="delete_item">Delete</button>
    <ul id="list-appunti"></ul>
<script type="text/javascript">
    
    function renderList(appuntiFilter) {

        const list_appunti = document.getElementById('list-appunti');
        list_appunti.innerHTML = '';
        
        for (i = 0; i < appuntiFilter.length; i++){
            
            var rand = Math.floor(Math.random()*1000)+1;

            const list_dom_string = `
                <div id="${rand}" class='row pb-3 mx-3 mt-3' style='border-bottom:1px solid #eeeeee;'>
                    <div id='fs-7' class='col-2 text-center font-weight-bold quant'>
                        ${appuntiFilter[i].count}x
                    </div>
                    <div class='col-3 pricep font-weight-bold text-right' style='color:#27c727;' id='price-app'>
                        ${parseFloat(appuntiFilter[i].price).toFixed(2).toLocaleString()}€
                    </div>
                    <div onclick='deleteItem("+i+")' class='col-2'><img src='delete.png' style='max-height:20px;' class='img-fluid' />
                    </div>
                </div>

            `;

            const parser = new DOMParser();
            const dom = parser.parseFromString(list_dom_string, 'text/html');

            list_appunti.appendChild(dom.body.children[0]);
            
        }

    }

    function deleteItem(list_appunti, index){

        list_appunti.splice(index ? index : 0, 1);

    }

    window.onload = function () {
        
        const appuntiFilter = [
           {title: "Apple", price: 0.50, count: 1},
           {title: "Pizza", price: 5.50, count: 1},
           {title: "Hamburger", price: 4.50, count: 1},
           {title: "Coca Cola", price: 0.99, count: 1},
        ];

        renderList(appuntiFilter);

        const delete_button = document.getElementById('delete_item');

        delete_button.addEventListener('click', function (e) {

            const index = null;

            deleteItem(appuntiFilter, index);
            renderList(appuntiFilter);

        }, true);
    }

</script>
</body>
</html>

Answer 6

If you need to remove items from the list, you can recreate it each time. This might be a costly process but is manageable if the cart doesn't contain too many items. Additionally, there's no requirement for jQuery as you can utilize DOMParser instead. Although I'm assuming the index of the item you wish to delete is the first one, you can adjust the index = null line accordingly. I trust this information proves helpful.

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <button id="delete_item">Delete</button>
    <ul id="list-appunti"></ul>
<script type="text/javascript">
    
    function renderList(appuntiFilter) {

        const list_appunti = document.getElementById('list-appunti');
        list_appunti.innerHTML = '';
        
        for (i = 0; i < appuntiFilter.length; i++){
            
            var rand = Math.floor(Math.random()*1000)+1;

            const list_dom_string = `
                <div id="${rand}" class='row pb-3 mx-3 mt-3' style='border-bottom:1px solid #eeeeee;'>
                    <div id='fs-7' class='col-2 text-center font-weight-bold quant'>
                        ${appuntiFilter[i].count}x
                    </div>
                    <div class='col-3 pricep font-weight-bold text-right' style='color:#27c727;' id='price-app'>
                        ${parseFloat(appuntiFilter[i].price).toFixed(2).toLocaleString()}€
                    </div>
                    <div onclick='deleteItem("+i+")' class='col-2'><img src='delete.png' style='max-height:20px;' class='img-fluid' />
                    </div>
                </div>

            `;

            const parser = new DOMParser();
            const dom = parser.parseFromString(list_dom_string, 'text/html');

            list_appunti.appendChild(dom.body.children[0]);
            
        }

    }

    function deleteItem(list_appunti, index){

        list_appunti.splice(index ? index : 0, 1);

    }

    window.onload = function () {
        
        const appuntiFilter = [
           {title: "Apple", price: 0.50, count: 1},
           {title: "Pizza", price: 5.50, count: 1},
           {title: "Hamburger", price: 4.50, count: 1},
           {title: "Coca Cola", price: 0.99, count: 1},
        ];

        renderList(appuntiFilter);

        const delete_button = document.getElementById('delete_item');

        delete_button.addEventListener('click', function (e) {

            const index = null;

            deleteItem(appuntiFilter, index);
            renderList(appuntiFilter);

        }, true);
    }

</script>
</body>
</html>

What is the best approach to eliminate an element from the array cart using JavaScript?

Answer №1

Answer №2

Answer №3

Similar questions

Locate all entries with inclusive connections within a complex many-to-(many-to-many) relationship using sequelizejs

Adjusting the Scaling Value to Match the Browser's Scaling Value

Navigating Form Submission in Next.js

Combining arrays of objects while maintaining data integrity in PHP

Issues arose when attempting to navigate in a JavaScript handler within ASP.NET MVC

What is the best way to add a delay to ajax using setTimeout when working within a switch case

Can you transform text with accents into plain ASCII characters?

Troubleshooting Problems with POST Requests in ExpressJS

Creating a calculator with JQuery and encountering challenges with performing multiple calculations

Filtering data in Angular based on specific dates

Having issues delivering static JavaScript files to the client's browser using express.js

TimeStamp Recorder - Typescript

Caution in Three.JS: Potential WebGL Issue with Texture Mapping in Material Creation

Experiencing problems with integrating Slim framework and AngularJS, such as encountering a 404 error

The functionality of iOS 9 is hindering the accessibility of modal mobile links

Modify the NAME attribute when clicked using Jquery

VueJS method for making an HTTP GET request

Exploring the process of reading a character array with spaces from a file using C++

Retrieve items from a JSON file based on the user input ID in a React project

Deploying a Vue/Nuxt application to Firebase as a Universal App with Server-Side Rendering (SS