Quote:
When I click the + button on Rooms, more Adult and Child select elements are added. Similarly, I want those added elements to be removed when I click the - button on rooms
$scope.minusRoom = function () {
if ($scope.room > 1) {
$scope.room--;
$scope.price = $scope.price - 2500;
var div = document.querySelector('div');
var rows = div.querySelectorAll('.spanrow')
var last = rows[rows.length - 1];
div.removeChild(last);
}
}
$scope.addRoom = function () {
if ($scope.room < 10) {
$scope.room++;
$scope.price = $scope.price + 2500;
var myEl = angular.element(document.querySelector('div'));
myEl.append('<span class="spanrow">Adult: <input type="button"value="-"></input><input type="text" ng-value="room" readonly="readonly"><input type="button" value="+"><span> Child:<input type="button"value="-"></input><input type="text" ng-value="room" readonly="readonly"><input type="button" value="+"><br/>');
}
}
This will remove the dynamically addded rows from the DOM but the $scope objects, you will have take care to meet the business needs.