AngularJS Example:
by jrm2k6
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app>
<div ng-controller="ColorController">
<div>
<input id='color-input' placeholder='Enter your color' ng-model='currentColor' />
<button ng-click='addColor()'>Add color</button>
</div>
<div id='colors-container'>
<div ng-repeat="color in colors">
<div class='color-item' style="background-color: {{color}}">
{{color}}
<div class='close' ng-click='removeColor(color)'>
x
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
#colors-container {
display: flex;
}
.color-item {
align-items: center;
color: white;
display: flex;
justify-content: center;
height: 80px;
margin: 10px;
position: relative;
width: 80px;
}
.close {
border: 1px solid white;
position: absolute;
right: 3px;
top: 3px;
}
JavaScript
function ColorController($scope) {
$scope.colors = ['red', 'blue'];
$scope.currentColor = null;
$scope.addColor = function() {
$scope.colors.push($scope.currentColor);
$scope.currentColor = null;
}
$scope.removeColor = function(color) {
$scope.colors= $scope.colors.filter(function(currentColor) {
return currentColor !== color;
});
}
}