We Keep Coding

How to delete an item from object

I'm using datatables and importer CSV file to fill a table and fill a hidden input
I'm trying to delete an item when I press the delete button from the table, at the moment I have this
$('#task-place-table tbody').on('click', '.deleted', function () {
dataTable
.row($(this).parents('tr'))
.remove()
.draw();
itemCounter--;
document.getElementById('item-counter').value = itemCounter;
});
this code can delete the item from the table, but not from the hidden input
for example, this is the input
[{"url":"http://www.restaurant.com","businessTypeId":"1"},{"url":"http://www.hotel.com","businessTypeId":"2"},{"url":"http://www.test.com","businessTypeId":"3"}]
In the example, I deleted restaurant and test item, but in the hidden input, the items still remain there (NOTE: businessTypeId is not the row ID)
I would like to have this when I delete an item from the table
[{"url":"http://www.hotel.com","businessTypeId":"2"}]
IMPORTANT NOTE: businessTypeId is not the row ID or Item ID, number 2 is coincidence (that number is the ID in database)
how can I delete items?

Get a reference to the hidden input.
Modify the value array for that hidden input.
i.e:
// "3" being the 'id' of the deleted item(s)
hiddenInputHandle.value = hiddenInputHandle.value.filter(i->i.businessTypeId !== "3")

Solution, with splice and a for, to loop through the array, I can clear the data taking url as reference
$('#task-place-table tbody').on('click', '.deleted', function () {
let value = $(this).closest('tr').find('td').eq(1).text();
for (let i = 0; i < placesArray.length; i++) {
if (placesArray[i].url == value) {
placesArray.splice(i, 1);
break;
}
}
$('#places').val(JSON.stringify(placesArray));
dataTable
.row($(this).parents('tr'))
.remove()
.draw();
itemCounter--;
document.getElementById('item-counter').value = itemCounter;
});

Add attribute to a row in an array after getting an ID

After a modification, I would like to add an attribute to highlight the newest or last updated row in my array until the user leaves the page. I don't know how to select the right row the getElementsByTagName() function.
Component
Here I get my selected object and add an attribute but the problem is that the id isn't the index of the row so it doesn't add the attribute to the right row.
getById(id: number) {
this.getByIdSub = this.service.get(id).subscribe((data) => {
console.log(data);
if (id != null) {
var t = document.getElementsByTagName("tr")[id].setAttribute("id", "test");
}
});
}
For example I want to select the first row of my array with the ID 10 and set the attribute to it but it will select the 10th row because I pass the ID 10 in the index.
my array
In this picture I clicked on the 3rd row but the first row is highlighted

If your id is id of the target element, then you can use document.querySelector("tr#" + id). This will select and return TR element with id attribute id. So your code would be:
getById(id: number) {
this.getByIdSub = this.service.get(id).subscribe((data) => {
console.log(data);
if (id != null) {
var t = document.querySelector("tr#" + id).setAttribute("id", "test");
}
});
}
You can find more info here: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

In protractor how to click on column based on other column value

I need to click on button in a row based on other associated value for that button in same row .
Need to click on :
button ng-if="ctrl.showEdit"
based on text contain 'abc' in following td or class
class="width-25 ng-binding"
Both above attributes are in a same row
HTML Table
this.EditByName = function (input) {
element.all(by.className('table pagination-table-margin ng-scope ng-table')).then(function (rows) {
rows.forEach(function (row) {
row.all(by.className('ng-binding')).then(function (columns) {
element.all(by.cssContainingText(input)).then(function () {
element(by.className('btn-grid ng-scope')).click();
console.log(input);
});
});
});
});
};

You need to use XPATHs selectors, so you can backtrack once you have found the columns with the value you want to use as reference, like this:
element(by.cssContainingText("td", "abc"))
.element(by.xpath("..")) // This selects the parent <tr>
.all(by.css("button[ng-if='ctr.showEdit']"))

bootstrap -table hide all rows except the clicked row

var $table = $('#table');
$table.on('expand-row.bs.table', function (e, index, row, $detail) {
$detail.html('Carregando os dados...');
});
I would like to capture all the rows except the clicked row , and close them.

I suppose that expand-row is a class...
I also assume that the actual display value of your rows is table-row...
But it may be inline too.
Try this:
var $table = $('#table');
$table.on("click", '.expand-row.bs.table', function (e, index, row, $detail) {
$('.expand-row.bs.table').each(function(){ // iterates all rows.
$(this).css({"display":"none"}); // Here, "this" is row element.
});
$(this).css({"display":"table-row"}); // Here, "this" is the clicked element.
$detail.html('Loading data ...');
});

on button click delete from datatable and also from array

foreach row in my table i've a delete button , on click this button i've the following function :
function deleteBussDay(jQtable)
{
var row = jQtable.parentNode.parentNode;
$(jQtable).closest('tr').remove();
openHour.splice(row.rowIndex,1);
// openHour is my array ,which i also want to delete from
}
the problem with this code it does delete the corret row from the table when clicking on delete but it removes the wrong row in the array . (one above of the selected row)
how can i fix it ?!

If, like you say, the correct row is removed, then you make the correct traversal to the table row here:
$(jQtable).closest('tr').remove();
Meaning, to get the rowIndex property of our table row, we can use the same jQuery object together with .prop():
function deleteBussDay(jQtable) {
var $row = $(jQtable).closest('tr'), rowInd = $row.prop('rowIndex');
$row.remove();
openHour.splice(rowInd ,1);
}

'rowIndex' counted for each table.
'rowIndex' changed when you sort table.
As alternative you can use some 'data' attribute as mark.
function deleteBussDay(jQtable)
{
var row = $(jQtable).closest('tr');
var id = row.data('rowIndex');
row.remove();
openHour.splice(id, 1);
// openHour is my array ,which i also want to delete from
}
or
function deleteBussDay(jQtable)
{
var row = jQtable.parentNode.parentNode;
var id = row.rowIndex;
$(row).remove();
openHour.splice(id, 1);
// openHour is my array ,which i also want to delete from
}