diff --git a/src/Umbraco.Web.UI.Client/libs/observable-api/array-state.test.ts b/src/Umbraco.Web.UI.Client/libs/observable-api/array-state.test.ts
index 2c6f7b747b..b5edf90fed 100644
--- a/src/Umbraco.Web.UI.Client/libs/observable-api/array-state.test.ts
+++ b/src/Umbraco.Web.UI.Client/libs/observable-api/array-state.test.ts
@@ -33,12 +33,38 @@ describe('ArrayState', () => {
 
 	});
 
+	it('remove method, removes the one with the key', (done) => {
+
+		const expectedData = [initialData[0], initialData[2]];
+
+		subject.remove(['2']);
+		const observer = subject.asObservable();
+		observer.subscribe((value) => {
+			expect(JSON.stringify(value)).to.be.equal(JSON.stringify(expectedData));
+			done();
+		});
+
+	});
+
+	it('filter method, removes anything that is not true of the given predicate method', (done) => {
+
+		const expectedData = [initialData[0], initialData[2]];
+
+		subject.filter(x => x.key !== '2');
+		const observer = subject.asObservable();
+		observer.subscribe((value) => {
+			expect(JSON.stringify(value)).to.be.equal(JSON.stringify(expectedData));
+			done();
+		});
+
+	});
+
 	it('add new item via appendOne method.', (done) => {
 
 		const newItem = {key: '4', another: 'myValue4'};
 		subject.appendOne(newItem);
 
-		const expectedData = [...initialData, newItem]
+		const expectedData = [...initialData, newItem];
 
 		const observer = subject.asObservable();
 		observer.subscribe((value) => {
diff --git a/src/Umbraco.Web.UI.Client/libs/observable-api/array-state.ts b/src/Umbraco.Web.UI.Client/libs/observable-api/array-state.ts
index 00f1365d52..e24fcb66c4 100644
--- a/src/Umbraco.Web.UI.Client/libs/observable-api/array-state.ts
+++ b/src/Umbraco.Web.UI.Client/libs/observable-api/array-state.ts
@@ -21,6 +21,7 @@ export class ArrayState<T> extends DeepState<T[]> {
 	/**
 	 * @method append
 	 * @param {unknown} unique - The unique value to remove.
+	 * @returns ArrayState<T>
 	 * @description - Remove some new data of this Subject.
 	 * @example <caption>Example remove entry with key '1'</caption>
 	 * const data = [
@@ -31,23 +32,52 @@ export class ArrayState<T> extends DeepState<T[]> {
 	 * mySubject.remove([1]);
 	 */
 	remove(uniques: unknown[]) {
-		const unFrozenDataSet = [...this.getValue()];
+		let next = this.getValue();
 		if (this._getUnique) {
-			uniques.forEach( unique =>
-				unFrozenDataSet.filter(x => {
-					// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-					// @ts-ignore
-					return this._getUnique(x) !== unique;
-				})
+			uniques.forEach( unique => {
+					next = next.filter(x => {
+						// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+						// @ts-ignore
+						return this._getUnique(x) !== unique;
+					})
+				}
 			);
 
-			this.next(unFrozenDataSet);
+			this.next(next);
 		}
+		return this;
+	}
+
+	/**
+	 * @method filter
+	 * @param {unknown} filterMethod - The unique value to remove.
+	 * @returns ArrayState<T>
+	 * @description - Remove some new data of this Subject.
+	 * @example <caption>Example remove entry with key '1'</caption>
+	 * const data = [
+	 * 	{ key: 1, value: 'foo'},
+	 * 	{ key: 2, value: 'bar'},
+	 * 	{ key: 3, value: 'poo'}
+	 * ];
+	 * const mySubject = new ArrayState(data, (x) => x.key);
+	 * mySubject.filter((entry) => entry.key !== 1);
+	 *
+	 * Result:
+	 *  [
+	 * 		{ key: 2, value: 'bar'},
+	 * 		{ key: 3, value: 'poo'}
+	 * ]
+	 *
+	 */
+	filter(predicate: (value: T, index: number, array: T[]) => boolean) {
+		this.next(this.getValue().filter(predicate));
+		return this;
 	}
 
 	/**
 	 * @method append
 	 * @param {Partial<T>} partialData - A object containing some of the data for this Subject.
+	 * @returns ArrayState<T>
 	 * @description - Append some new data to this Subject.
 	 * @example <caption>Example append some data.</caption>
 	 * const data = [
@@ -59,11 +89,13 @@ export class ArrayState<T> extends DeepState<T[]> {
 	 */
 	appendOne(entry: T) {
 		this.next(appendToFrozenArray(this.getValue(), entry, this._getUnique))
+		return this;
 	}
 
 	/**
 	 * @method append
 	 * @param {T[]} entries - A array of new data to be added in this Subject.
+	 * @returns ArrayState<T>
 	 * @description - Append some new data to this Subject, if it compares to existing data it will replace it.
 	 * @example <caption>Example append some data.</caption>
 	 * const data = [
@@ -79,5 +111,12 @@ export class ArrayState<T> extends DeepState<T[]> {
 	append(entries: T[]) {
 		// TODO: stop calling appendOne for each but make sure to handle this in one.
 		entries.forEach(x => this.appendOne(x))
+
+		/*
+		const unFrozenDataSet = [...this.getValue()];
+
+		this.next(unFrozenDataSet);
+		*/
+		return this;
 	}
 }