Remove specific element from array in Knockout.JS
54,753
Solution 1
You have to use the remove function :
self.removePlayer = function (Name) {
self.players.remove(function(player) {
return player.name == Name;
});
}
html
<table id="userlist2" class="tablesorter" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>Queue</th>
<th>Points</th>
</tr>
</thead>
<tbody data-bind="foreach: players">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: queue"></td>
<td data-bind="text: score"></td>
</tr>
</tbody>
</table>
javascript
function PlayerViewModel() {
var self = this;
self.players = ko.observableArray();
self.addPlayer = function (Name, QueuePos, Score) {
self.players.push({
name: Name,
queue: QueuePos,
score: Score
});
}
self.removePlayer = function (Name) {
self.players.remove(function(player) {
return player.name == Name;
});
}
}
players = new PlayerViewModel();
ko.applyBindings(players);
players.addPlayer('Player1', '0', '0');
players.addPlayer('Player2', '0', '0');
players.removePlayer('Player2');
Solution 2
Working remove function:
self.removePlayer = function (name) {
self.players.remove(function(player) {
return player.name == name
});
}
Solution 3
your code is fine except 2 error you have:
if (self.players()[i].name == Name) console.log(i);
self.players().splice(i, 1);
first here you are executing 2 lines so to execute them both you need to use {}
so replace it with:
if (self.players()[i].name == Name) {
console.log(i);
self.players.splice(i, 1);
}
second to use splice
you done need to call your observable array with ()
so you to use it as following :
self.players.splice(i, 1);
Author by
NoWhereToBeSeen
Updated on July 09, 2022Comments
-
NoWhereToBeSeen almost 2 years
I am creating a multiplayer game over network so I have to react on network events.
I have this simple code, but the removePlayer method doesnt work. The addPlayer() works fine.
<table id="userlist2" class="tablesorter" cellspacing="0"> <thead> <tr> <th>Name</th> <th>Queue</th> <th>Points</th> </tr> </thead> <tbody data-bind="foreach: players"> <tr> <td data-bind="text: name"></td> <td data-bind="text: queue"></td> <td data-bind="text: score"></td> </tr> </tbody> </table> function PlayerViewModel() { var self = this; self.players = ko.observableArray(); self.addPlayer = function (Name, QueuePos, Score) { self.players.push({ name: Name, queue: QueuePos, score: Score }); } self.removePlayer = function (Name) { for (var i = 0; i < self.players().length; i++) { if (self.players()[i].name == Name) console.log(i); self.players().splice(i, 1); } } } players = new PlayerViewModel(); ko.applyBindings(players); players.addPlayer('Player1', '0', '0'); players.addPlayer('Player2', '0', '0'); players.removePlayer('Player2');
Heres the http://jsfiddle.net/xseTc/
-
ebram khalil almost 11 yearsi updated 2 lines of your code check my answer
-
-
Karussell over 9 yearsisn't it player.name() == Name ?
-
deblocker about 8 years@karussel: ...just because not even one answered to this comment: it's a "streamlined" structure, single Player properties aren't observable.