How do I delete an item or object from an array using ng-click

Question

I am trying to write a function that enables me to remove an item when the button is clicked but I think I am getting confused with the function - do I use  digest   HTML  amp  app js    lt ul ng-repeat  bday in bdays  gt     lt li gt       lt span ng-hide  editing  ng-click  editing   true  gt   bday name       bday date   lt  span gt       lt form ng-show  editing  ng-submit  editing   false  gt         lt label gt Name  lt  label gt         lt input type  text  ng-model  bday name  placeholder  Name  ng-required  gt         lt label gt Date  lt  label gt         lt input type  date  ng-model  bday date  placeholder  Date  ng-required  gt         lt br  gt         lt button class  btn  type  submit  gt Save lt  button gt         lt a class  btn  ng-click  remove    gt Delete lt  a gt       lt  form gt     lt  li gt   lt  ul gt    scope remove   function       scope newBirthday    scope  digest

User · Answer

In case you re inside an ng-repeat you could use a one liner option      lt div ng-repeat  quot key in keywords quot  gt            lt button ng-click  quot keywords splice  index  1  quot  gt                 key name            lt  button gt       lt  div gt    index is used by angular to show current index of the array inside ng-repeat

User · Answer

I usually write in such style     lt a class  btn  ng-click  remove  index   gt Delete lt  a gt     scope remove   function index      scope  yourArray  splice index  1       Hope this will help You have to use a dot    between  scope and  yourArray

User · Answer

To remove item you need to remove it from array and can pass bday item to your remove function in markup  Then in controller look up the index of item and remove from array   lt a class  btn  ng-click  remove item   gt Delete lt  a gt    Then in controller    scope remove   function item       var index    scope bdays indexOf item      scope bdays splice index  1            Angular will automatically detect the change to the bdays array and do the update of ng-repeat  DEMO  http   plnkr co edit ZdShIA p preview  EDIT  If doing live updates with server would use a service you create using   resource to manage the array updates at same time it updates server

User · Answer

Pass the id that you want to remove from the array to the given function    from the controller  Function can be in the same controller but prefer  to keep it in a service       function removeInfo id        let item   bdays filter function item          return bdays id    id         0       let index   bdays indexOf item       data device splice indexOfTabDetails  1

User · Answer

Here is another answer  I hope it will help    lt a class  btn  ng-click  delete item   gt Delete lt  a gt    scope delete item    var index   this list indexOf item                   this list splice index  1         array splice start  array splice start  deleteCount  array splice start  deleteCount  item1  item2         Full source is here https   developer mozilla org en-US docs Web JavaScript Reference Global Objects Array splice

User · Answer

I disagree that you should be calling a method on your controller   You should be using a service for any actual functionality  and you should be defining directives for any functionality for scalability and modularity  as well as assigning a click event which contains a call to the service which you inject into your directive     So  for instance  on your HTML      lt a class  btn  ng-remove-birthday   index  gt Delete lt  a gt    Then  create a directive     angular module  myApp   directive  ngRemoveBirthday     myService   function myService       return function scope  element  attrs           angular element element bind  click   function                myService removeBirthday scope  eval attrs ngRemoveBirthday   scope                                    Then in your service     angular module  myApp   factory  myService    function        return           removeBirthday  function birthdayIndex  scope               scope bdays splice birthdayIndex               scope  apply                            When you write your code properly like this  you will make it very easy to write future changes without having to restructure your code   It s organized properly  and you re handling custom click events correctly by binding using custom directives     For instance  if your client says   hey  now let s make it call the server and make bread  and then popup a modal    You will be able to easily just go to the service itself without having to add or change any of the HTML  and or controller method code   If you had just the one line on the controller  you d eventually need to use a service   for extending the functionality to the heavier lifting the client is asking for    Also  if you need another  Delete  button elsewhere  you now have a directive attribute   ng-remove-birthday   you can easily assign to any element on the page  This now makes it modular and reusable   This will come in handy when dealing with the HEAVY web components paradigm of Angular 2 0  There IS no controller in 2 0       Happy Developing

User · Answer

Using  index works perfectly well in basic cases  and  charlietfl s answer is great  But sometimes   index isn t enough    Imagine you have a single array  which you re presenting in two different ng-repeat s  One of those ng-repeat s is filtered for objects that have a truthy property  and the other is filtered for a falsy property  Two different filtered arrays are being presented  which derive from a single original array   Or  if it helps to visualize  perhaps you have a single array of people  and you want one ng-repeat for the women in that array  and another for the men in that same array   Your goal  delete reliably from the original array  using information from the members of the filtered arrays    In each of those filtered arrays   index won t be the index of the item within the original array  It ll be the index in the filtered sub-array  So  you won t be able to tell the person s index in the original people array  you ll only know the  index from the women or men sub-array  Try to delete using that  and you ll have items disappearing from everywhere except where you wanted  What to do   If you re lucky enough be using a data model includes a unique identifier for each object  then use that instead of  index  to find the object and splice it out of the main array   Use my example below  but with that unique identifier   But if you re not so lucky    Angular actually augments each item in an ng-repeated array  in the main  original array  with a unique property called   hashKey  You can search the original array for a match on the   hashKey of the item you want to delete  and get rid of it that way   Note that   hashKey is an implementation detail  not included in the published API for ng-repeat  They could remove support for that property at any time  But probably not   -    scope deleteFilteredItem   function hashKey  sourceArray     angular forEach sourceArray  function obj  index          sourceArray is a reference to the original array passed to ng-repeat          rather than the filtered version          1  compare the target object s hashKey to the current member of the iterable      if  obj   hashKey     hashKey             remove the matching item from the array       sourceArray splice index  1            and exit the loop right away       return                   Invoke with   ng-click  deleteFilteredItem item   hashKey  refToSourceArray       EDIT  Using a function like this  which keys on the   hashKey instead of a model-specific property name  also has the significant added advantage of making this function reusable across different models and contexts  Provide it with your array reference  and your item reference  and it should just work

User · Answer

This is a correct answer     lt a class  btn  ng-click  remove  index   gt Delete lt  a gt   scope remove function  index       scope bdays splice  index 1            In  charlietfl s answer  I think it s wrong since you pass  index as paramter but you use the wish instead in controller  Correct me if I m wrong

User · Answer

implementation Without a Controller    x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 6 4 angular min js  gt  lt  script gt  x000D   lt body gt  x000D   x000D   lt script gt  x000D    var app   angular module  myShoppingList         x000D   lt  script gt  x000D   x000D   lt div ng-app  myShoppingList   ng-init  products     Milk   Bread   Cheese    gt  x000D     lt ul gt  x000D       lt li ng-repeat  x in products track by  index  gt   x   x000D         lt span ng-click  products splice  index 1   gt    lt  span gt  x000D       lt  li gt  x000D     lt  ul gt  x000D     lt input ng-model  addItem  gt  x000D     lt button ng-click  products push addItem   gt Add lt  button gt  x000D   lt  div gt  x000D   x000D   lt p gt Click the little x to remove an item from the shopping list  lt  p gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    The splice   method adds removes items to from an array   array splice index  howmanyitem s   item 1         item n    index  Required  An integer that specifies at what position to add remove items  Use negative values to specify the position from the end of the array   howmanyitem s   Optional  The number of items to be removed  If set to 0  no items will be removed   item 1       item n  Optional  The new item s  to be added to the array

User · Answer

Building on the accepted answer  this will work with ngRepeat  filterand handle expections better   Controller   vm remove   function item  array      var index   array indexOf item     if index gt  0      array splice index  1       View   ng-click  vm remove item  scope bdays

User · Answer

if you have ID or any specific field in your item  you can use filter    its act like Where      lt a class  btn  ng-click  remove item   gt Delete lt  a gt    in controller    scope remove   function item        scope bdays    scope bdays filter function  element                        return element ID  item ID

[html] How do I delete an item or object from an array using ng-click?

In case you're inside an ng-repeat

Examples related to html

Examples related to angularjs

Examples related to edit