Remove element on basis of class in Angular 6

I have one list in that on click of each item one class is toggle in that list. Here is my code

My Code

I am toggling class in list. I want to remove unselected element from list when user click on "ADD" button. I have done till toggle class in list but I am facing problem while removing items on basis of css class. Please help.

Try this:


  deleteNotSelect() {
    let data = this.items.filter(data => == true)
        if (data.length > 0) {
            this.items = data;

Removing an element with the plain JavaScript remove() method , When removing an element with JavaScript, you must go to its parent first instead​. That's another cool JavaScript method which is very useful to select an element by class name for example. All these Basic knowledge of Angular. CountryName VARCHAR(50). 5. ,TwoCharCountryCode CHAR(2). 6. but, sometimes we want to remove element from original array(non immutable), for example array used in Angular 2 *ngFor directive – Ravinder Payal Feb 8 '17 at 14:06 41 Better than the accepted solution because it does not assume only one occurrence of a match and immutability is preferable – Greg Mar 6 '17 at 16:46

if i understood exactly what you need, that you want to delete the unselected items when clicking the button ADD, then add this to your button.

<button (click)="removeUnSelected()">ADD</button>

and add this function to your app.ts file

removeUnSelected() {
// check if enything is selected first
let flag=0;
let i=0;
for(i=0;i<this.items.length;i++) {
  if(this.items[i].active) {
for(i=0;i<this.items.length;i++) {
  if(!this.items[i].active) {
    this.items.splice(i, 1); 


i tried it already... this will delete the items from the array if they are not selected when clicking the button.

How To Remove a Class Name, Remove Class. Step 1) Add HTML: In this example, we will use a button to remove the "mystyle" class from the <div> element with id="myDIV":  If you come from angular.js world, you know that it was pretty easy to manipulate the DOM. Angular injected DOM element into link function and you could query any node within component’s template, add or remove child nodes, modify styles etc. However, this approach had one major shortcoming — it was tightly bound to a browser platform.

Use a forEach loop to toggle false the active propery of the item:

  add() {
    this.items.forEach(function(v,i){ = false;


Learn To: Dynamically Adding & Removing CSS Classes using , Using Angular's NgClass Directive to Include or Exclude CSS classes based on How To: Using Directives to Show & Hide Elements for Authenticated Users  Add remove Class with ngClass in AngularJS With ngClass directive, it is easier to maintain CSS classes between HTML elements dynamically. You cannot just pass the class name in ng-class like class attribute.

How to Remove an Element From an Array, Simple: it just removes the element at index 1 . The first parameter is, indeed, the index, and the second is the number of elements to remove,  Add or Remove css class to HTML element in angularJS. This example will shows you how to add or remove a css class to HTML element by using angularJS JavaScript. We can use addClass() method to angualr element to add css class and removeClass() method to remvoce css class. Add Class Syntax:

What's the best way to add/remove classes from an element?, I simply want to add a class of active to which ever li is clicked and remove it when another is Basic UI stuff. 6 Concepts to Master to be an Angular Architect. Angular comes to the rescue with a special syntax, <property>.<unit>. So for the above if we wanted the size to be 24 pixels we would write [ngStyle]=" {'font-size.px':24}" The property name is font-size.px and not just font-size. The .px suffix says that we are setting the font-size in pixels. You could .em to express the font size in ems or

How to reset/remove CSS styles for element ?, MaterialApp class in Flutter Hence we apply the following code to remove the default styles present on a button. Example 1: Here you will see how HTML | Color Styles and HSL · How to append Angular styles in footer ? How to use How to remove parent element except its child element using jQuery ? jQuery | Move  Let’s take a dive into Angular’s NgClass and master the syntax, whilst also learning about the native DOM API for class manipulation – an important feat before diving into the framework’s implementation. With Angular, we have a few approaches to add, remove or toggle a class. We can choose to change single class and bind to a property

  • Thanks @UnluckyAj.. working but the problem is if nothing is selected all are deleting
  • Hi @UnluckyAj what should I do if I want to add removed items on back button. can tou please help me.
  • how you are getting the original array. call the same method.
  • I am getting array from json object
  • call same json object again on different page.
  • Thanks @maha working but the problem is if nothing is selected all are deleting.
  • u're very welcome .. what do you want to happen if nothing is selected?