How To Delete An Item From State Array in ReactJS?

How to delete an item or object from the array using ng-click ?

Last Updated : 10 Jun, 2020

The task is to delete the item from the list when the button is clicked. This all should be done by using ng-click. This is done by using the splice() method. The syntax for the method is given below.

Syntax for splice() function:

array.splice(indexno, noofitems(n), item-1, item-2, ..., item-n)

Example for splice() function:

const topics = ['Array', 'String', 'Vector']; 
let removed=topics.splice(1, 1); 

Output:

['Array', 'Vector']

The keywords in syntax are explained here:

indexno: This is required quantity. Definition is integer that specifies at what position to add/remove items.
If it is negative means to specify the position from the end of the array.
noofitems(n): This is optional quantity. This indicates a number of items to be removed. If it is set to 0, no items will be removed.
item-1, …item-n:This is also optional quantity. This indicates new item(s) to be added to the array

Example: Let us focus on example more. Here we will try to prove the delete operation via example. Here student names are given who have an account on GeeksForGeeks. We will try to delete one of the names from the array of student_names.

<!DOCTYPE html> 
  <html> 
     <script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"> 
     </script> 
  
<body style = "text-align:center;">   
        
    <h1 style = "color:green;" >   
        GeeksForGeeks   
    </h1>   
<script> 
  var app = angular.module("studentNames", []);  
</script> 
  
<div ng-app="studentNames"  
    ng-init="names= ['Madhavi', 'Shivay', 'Priya']"> 
  <ul> 
    <li ng-repeat="x in names track by $index">{{x}} 
      <span ng-click="names.splice($index, 1)"> 
      <strong>x</strong</span> 
    </li> 
  </ul> 
  <input ng-model="addItem"> 
  <button ng-click="names.push(addItem)">Add</button> 
</div> 
  
<p>Click the small x given in front  of 
 name to remove an item from the name list.</p> 
  
</body> 
</html> 

Output:
Before Click:

After click:

How To Delete An Item From State Array in ReactJS?

S

shivanidjadhav2

Improve

Article Tags :

Similar Reads

How To Delete An Item From State Array in ReactJS?

It is important to manage the state in ReactJS for building interactive user interfaces. Sometimes when we work with arrays, we need to remove an item from these arrays. A common use case is deleting an item from an array stored in the componentâ€™s state. In this article, weâ€™ll explore different ways

How to delete an element from an array using JavaScript ?

The array is a type of data structure that allows us to store similar types of data under a single variable. The array is helpful to create a list of elements of similar types, which can be accessed using their index. In this article, we will discuss different ways to remove elements from the array.

How to delete an index from JSON Object ?

Deleting an index from a JSON object involves removing a specific key-value pair from the object structure. This is often done to clean up data, remove sensitive information, or modify the object for specific use cases, ensuring only relevant information remains accessible. Now, to delete any index

How to Delete a Row from Table using AngularJS ?

Given a HTML table and the task is to remove/delete the row from the table with the help of AngularJS. Approach: The approach is to delete the row from the array where it stored and served to the table data. When the user clicks on the button near to the table row, it passes the index of that table

How to remove object from array of objects using JavaScript ?

Removing an object from an array of objects in JavaScript refers to the process of eliminating a specific object from the array based on certain conditions, like matching a property value. This task is common in data manipulation, ensuring the array only contains the desired elements. There are two

How to Remove HTML element from DOM using AngularJS ?

In this article, we will see how to remove particular HTML elements from the DOM with the help of AngularJS, along with understanding its implementation through the examples. For this, we can use the remove() method that helps to remove all the selected elements including all the text. Syntax: selec

How to directly update a field by using ng-click in AngularJS ?

In this article, we will see how to update the field directly with the help of the ng-click directive in AngularJS, along with understanding different ways to implement it through the implementations. Any field can be updated with ng-click using a custom JavaScript function. For this, we can make a

How to Remove First and Last Element from Array using JavaScript?

Removing the first and last elements from an array is a common operation. This can be useful in various scenarios, such as data processing, filtering, or manipulation. Example: Input: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]Output: [ 2, 3, 4, 5, 6, 7, 8, 9 ]Removing first and last element in array can be d

How to get original element from ng-click in AngularJS ?

In AngularJS, we can get the original DOM element that fired the ng-click event using the event's currentTarget property. Getting the event's currentTarget can be useful when we want to track an element's activity, in this case, whether and how many times a particular element is clicked, or we want

JavaScript- Delete from a Given Position of JS Array

These are the following ways to delete an item from the given array at given position: 1. Using the splice() Method(Most efficient for in-place modifications)The splice() method is the most versatile way to remove elements from any position in an array. It allows you to specify the index where the r