knockoutでネストした配列の中身を削除する方法

お世話になっております。

knockoutでネストした配列の中身を削除する方法がわからず泣きそうです。

下記がソースコードになります（このまま保存していただくとデバッグできる状態にしております。）
ネストした要素内も監視するためにmappingプラグインを使用しています。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4	<meta charset="UTF-8">
5	<!-- knockoutjsをcdnから読み込む -->
6  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
7  <!-- knockoutjsのmappingプラグイン -->
8 	<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
9
10	<style>
11		.deleteText{cursor: pointer;}
12	</style>
13
14	<title>knockout</title>
15</head>
16<body>
17	<div data-bind="foreach: users" id="js-users">
18		<!-- ko foreach: list -->
19			<div data-bind="text: '配列の長さ：' + arr.length"></div>
20			<!-- ko foreach: arr -->
21				<span data-bind="text: $data"></span>
22				<span class="deleteText" data-bind="click: removeChild">×</span><br>
23			<!-- /ko -->
24			<button data-bind="click: $parent.addChildArray">追加</button>
25			<hr>
26		<!-- /ko -->
27	</div>
28	  <script>
29  var users = [
30  	{
31  		list: [
32  			{
33  				arr: ['test11', 'test12', 'test13']
34  			},
35  			{
36  				arr: ['test21', 'test22', 'test23']
37  			},
38  			{
39  				arr: ['test31', 'test32', 'test33']
40  			},
41  			{
42  				arr: ['test41', 'test42', 'test43']
43  			}
44  		],
45  		addChildArray: function(data) {
46  			this.arr.push('added item');
47  			ko.mapping.fromJS(users, tableViewModel);
48  		},
49  	}
50  ]
51
52  var removeChild = function(data, event){
53  	//ここで削除処理
54		console.log(data);
55		console.log(event);
56	}
57
58  var js_translation_wrapper = document.getElementById('js-users');
59  var tableViewModel = ko.mapping.fromJS(users);
60
61	ko.applyBindings(tableViewModel, js_translation_wrapper);
62
63  </script>
64</body>
65</html>

ソースコードをブラウザで表示していただくと下の画像のように展開されると思います。

こちらのtest11, test12 ...の横に付いているバツボタンを押すと、そのバツボタンを含む配列の要素を削除したいです。

どうやったらclickした際の自分（自分の配列要素）を参照して削除することができるかわかりません。

初心者的な質問で申し訳ございません。
ご教授お願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

こういうことでしょうか？

javascript
1var removeChild = function(data, event){
2      //ここで削除処理
3        console.log(data);
4        console.log(event);
5        
6        // add start
7        var usersList = users[0].list;
8        for (var i = 0; i < usersList.length; i++) {
9        	var arr = usersList[i].arr;
10        	for (var j = 0; j < arr.length; j++) {
11        		if (data === arr[j]) {
12        			arr.splice(j, 1);
13        			ko.mapping.fromJS(users, tableViewModel);
14        		}
15        	}
16        }
17        // add end
18    }