Вы можете достичь этого, используя Array.reduce с рекурсией для детей.
Пример:
const data = [
{ id: 1, children: [{ id: 2, children: [] }] },
{
id: 2,
children: [
{
id: 1,
children: [],
},
],
},
{
id: 3,
children: [],
},
{
id: 4,
children: [
{
id: 2,
children: [
{
id: 2,
children: [
{
id: 1,
children: [],
},
{
id: 2,
children: [],
},
],
},
],
},
],
},
];
function removeBy(data, predicate) {
return data.reduce((result, item) => {
if (!predicate(item.id)) {
const newItem = { ...item };
if (item.children.length > 0) {
newItem.children = removeBy(item.children, predicate);
}
result.push(newItem);
}
return result;
}, []);
}
const predicate = value => value === 1;
const result = removeBy(data, predicate);
console.log(result);
Если Вы имеете определенный узел (типа #text) и хотите изменить его значение, можно использовать nodeValue свойство:
node.nodeValue="new value";
Примечание:
innerText (и возможно textContent) возвратится/установит и текущий узел и весь происходящий текст узлов, и так не может быть поведением, которое Вы хотите/ожидаете.
Я полагаю, что innerHTML используется для этого... С другой стороны это не W3C, утвержденный..., но он работает...
node.innerHTML="new value";