Removing cookies with angular js: A simple guide

I have a list of cookies that contain commas, and I want to remove a specific item when it is clicked. Here is an example of how my cookies are structured:

879273565,879269461,879273569,659234741

artistcontrollers.controller("CartController", ["$scope", "$http", "$cookies", "$cookieStore", function ($scope, $http, $cookies, $cookieStore){

var list = $cookies.get('basketlist');

console.log("Before removal "+list);

$scope.DeleteCookie = function (id){
    console.log(id);
    $cookies.remove(id);
    console.log("After removal "+list);
}

}]);

In the HTML:

<a href="javascript:void(0);" class="addtocart_class btn btn-default" ng-click="DeleteCookie(cartlist.trackId)">Remove</a>

I need help figuring out how to remove items one by one when a particular item id is clicked.

javascriptangularjscookies

Answer №1

To remove a specific value, you must first parse it.

artistcontrollers.controller("CartController", ["$scope", "$http", "$cookies", "$cookieStore", function ($scope, $http, $cookies, $cookieStore){

var list = $cookies.get('basketlist');

$scope.DeleteCookie = function (id){
    var cookiesArray = list.split(',');
    var index = cookiesArray.indexOf(id);
    if(index !== -1)
    {
      cookiesArray.splice(index, 1);
    }
    $cookies.put('basketList', cookiesArray.join())
}

}]);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Could this be a Vue.js memory leakage issue?

Check out this component's code: import { defineComponent, ref } from "@vue/composition-api"; const template = /* html */ ` <div> <nav> <button @click="showCanvas = !showCanvas">Toggle</button> </nav>a <can ...

javascriptvue.jsdomcanvasmemory-leaks

JavaScript label value vanishing after postback

When using a datepicker in JavaScript, I encountered an issue where the label resets to the default value after a postback to the server, instead of retaining the user's selected values. Despite my attempts to rearrange the code, the label consistent ...

javascriptc#htmlasp.net

Tips for sending properties to a Material-UI styled component

I am facing a challenge with passing props to a component that already has internal props for handling styling. I am not sure how to manage both sets of props effectively. Below is my current setup. const styles = theme => ({ // Theme building }); ...

javascriptnode.jsreactjsmaterial-ui

The JavaScript alert box cannot retrieve data from the PHP parent page

What am I missing? Here is the JavaScript code snippet: <script language="javascript"> function openPopup(url) { window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no, menubar=no,scrollbars=n ...

javascriptphp

Effective management and structuring of ExpressJS routes

I recently made the switch from PHP to NodeJS and Express, and I must say, it has been quite a learning experience. Following online tutorials to build web apps with Express has been eye-opening. I decided to tackle a project using just JavaScript, but I ...

javascriptnode.jsexpressroutes

Styling the time ticks on the x-axis in Nivo Line Charts

I need help styling the x-axis of my line chart to show time. I am utilizing the @nivo/line react library for generating charts. axisBottom={{ tickValues: 3, tickRotation: 90, format: (values) => `${getRequiredDateFormat(values, 'MMMM-DD ...

javascriptreactjsd3.jsgraphaxis-labels

Understanding the functionality of an array as an index in JavaScript

It was discovered (tested in Chrome) that the index of an array can actually be an array itself: a = [1, 2, 3] index = [1] a[index] // returns 2 Has there been any official documentation confirming this behavior? ...

javascriptarrays

Learn how to efficiently redirect users without losing any valuable data after they sign up using localStorage

I am currently facing an issue with my sign up form. Whenever a user creates an account, I use localStorage to save the form values. However, if the user is redirected to another page after hitting the submit button, only the last user's data is saved ...

javascripthtml

Pass the retrieved object back to the calling function in NodeJS using asynchronous MySQL operations

I'm diving into NodeJS for the first time and struggling to create a reusable function that can execute a query passed as a parameter and then return the response to the caller. This approach is necessary as there are over 100 functions in need of dat ...

javascriptnode.jsasynchronouscallbackreturn

Karma issue: The application myApp has not been defined

Currently, I am attempting to run tests on the Angular seed project using a fresh installation of Karma in a separate directory. I have not made any modifications to the Angular seed project. However, I am encountering an issue where both myApp and myApp.V ...

angularjsunit-testingjasminekarma-runnerkarma-jasmine

PubNub's integration of WebRTC technology allows for seamless video streaming capabilities

I've been exploring the WebRTC sdk by PubNub and so far, everything has been smooth sailing. However, I'm facing a challenge when it comes to displaying video from a client on my screen. Following their documentation and tutorials, I have writte ...

javascripthtmlwebrtcpubnub

Removing an item from an array containing several objects

I have an array that looks like this: var participants = [ {username: "john", time: null}, {username: "samira", time: null}, {username: "mike", time: null}, {username: "son", time:null} ] To remove an item based on the username, I can do the f ...

javascript

Toggle Jquery menu with a click of a button

I need help with creating a menu for a forum that opens on click and closes on click. Here is the code I have so far: /*Custom BBPress admin links menu*/ function wpmudev_bbp_admin_links_in_menu($retval, $r, $args) { if ( is_user_logged_in() ) { $me ...

javascriptphpjqueryhtmlcss

Outputting PHP code as plain text with jQuery

My aim is to set up a preview HTML section where I am encountering a difficulty. I am struggling to display PHP code when retrieving and printing it from a textarea in the HTML. Here are my current codes, This is the HTML area where the textarea code will ...

javascriptphpjqueryhtml

Enabling custom file extensions for JavaScript IntelliSense in VS Code: A step-by-step guide

The title of this query reveals my predicament. In our organization, we employ an unconventional file extension for source code written in JavaScript. It appears that switching the file extension to ".js" triggers IntelliSense. My curiosity lies in whethe ...

javascripttypescriptvisual-studio-codeintellisensefile-extension

Vue.js isn't triggering the 'created' method as expected

I have a main component called App.vue. Within this component, I have defined the created method in my methods object. However, I am noticing that this method is never being executed. <template> <div id="app"> <Header /> <Ad ...

javascriptvue.jsvue-component

Sending JavaScript variables to an ArrayList in a Java servlet

For instance, Let's say we have the following table: <table> <tr> <td>john</td> <td>doe</td> </tr> </table> This table can be dynamically generated. I am extracting values from the table using this ...

javajavascriptarraylist

Node.js is known for its unreliable promise returns

Currently, I have a function in place that establishes a connection with a sql database. After querying the database and formatting the results into an HTML table, the function returns the variable html: function getData() { return new Promise((resolv ...

javascriptsql-servernode.jsnpmpromise

How can you create a sticky navigation bar specifically designed for horizontal scrolling on a website?

I am facing a challenge with a large table that extends beyond the screen, requiring both horizontal and vertical scrolling. My goal is to create a sticky navbar that remains at the top when I scroll horizontally, but hides when I scroll vertically, only t ...

javascriptcss

Angular 6 component experiencing issues with animation functionality

I've implemented a Notification feature using a Notification component that displays notifications at the top of the screen. The goal is to make these notifications fade in and out smoothly. In my NotificationService, there's an array that holds ...

javascriptangulartypescript