Decrement error: DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Файл index.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/2.2.3/mithril.js"></script>
    <title>Test</title>
</head>
<body>
<section class="container" id="app"></section>

<script type="text/javascript" src="/app.js"></script>
</body>
</html>

Файл app.js

let vroot = document.getElementById("app");
let routes = {};

function LeftPanel() {
    let data = {
        lists: []
    };
    function item_render(item) {
        function count_update(e) {
            item.count = Number(e.target.value);
            // m.redraw();
        }
        function color_update(e) {
            item.color = e.target.value;
            // m.redraw();
        }
        return m('div', {class: 'input-group mb-3'}, [
            m('input', {class: 'form-control', type: 'number', onchange: count_update, value: item.count}),
            m('input', {class: 'form-control form-control-color', type: 'color', onchange: color_update, value: item.color})
        ])
    };
    function items_render(items) {
        return items.map(item_render);
    };
    function list_render(list) {
        return m('div', {class: ''}, [
            list.id,
            items_render(list.items)
        ])
    };
    function lists_render() {
        return data.lists.map(list_render);
    };
    return {
        oninit: function(vnode) {
            console.log('LeftPanel.oninit');
            for (let key in vnode.attrs){
                data[key] = vnode.attrs[key];
            };
        },
        onbeforeupdate: function(vnode, old) {
            console.log('LeftPanel.onbeforeupdate');
            console.log(old);
            for (let key in vnode.attrs){
                data[key] = vnode.attrs[key];
            };
        },
        view: function(vnode) {
            console.log('LeftPanel.view');
            let result = [];
            result.push(lists_render());
            return result;
        }
    }
};

function RightPanel() {
    let data = {
        lists: []
    };
    function item_render(item) {
        console.log('RightPanel.item_render');
        console.log(Array(item.count).fill(m('div', {class: 'btn me-1', style: `background-color: ${item.color}`})))
        return m('div', {class: 'col'},
            box_render(item)
        )
    };
    function box_render(item) {
        return Array(item.count).fill(m('div', {class: 'btn me-1', style: `background-color: ${item.color}`}))
    }
    function items_render(items) {
        return items.map(item_render);
    };
    function list_render(list) {
        return m('div', {class: 'card mb-3'}, [
            m('div', {class: 'card-header'}, list.id),
            m('div', {class: 'card-body'}, items_render(list.items)),
        ])
    };
    function lists_render() {
        return data.lists.map(list_render);
    };
    return {
        oninit: function(vnode) {
            console.log('RightPanel.oninit');
            for (let key in vnode.attrs){
                data[key] = vnode.attrs[key];
            };
        },
        onbeforeupdate: function(vnode) {
            console.log('RightPanel.onbeforeupdate');
            for (let key in vnode.attrs){
                data[key] = vnode.attrs[key];
            };
        },
        onupdate: function(vnode) {
            console.log('RightPanel.onupdate');
        },
        view: function(vnode) {
            console.log('RightPanel.view');
            let result = [];
            result.push(lists_render());
            return result;
        }
    }
};

function Home() {
    let data = {
        lists: [
            {
                id: 'List 1',
                items: [
                    {
                        count: 5,
                        color: '#000000',
                    },
                    {
                        count: 7,
                        color: '#ff0000',
                    }
                ]
            },
            {
                id: 'List 2',
                items: [
                    {
                        count: 3,
                        color: '#00ff00',
                    },
                    {
                        count: 10,
                        color: '#0000ff',
                    }
                ]
            }
        ]
    };
    return {
        oninit: function(vnode) {
            console.log('Home.oninit');
            console.log(data);
        },
        onbeforeupdate: function(vnode) {
            console.log('Home.onbeforeupdate');
            console.log(data);
        },
        view: function(vnode) {
            let result = [];
            result.push(
                m('div', {class: 'row'},
                    m('div', {class: 'col-lg-6'}, m(LeftPanel, {lists: data.lists})),
                    m('div', {class: 'col-lg-6'}, m(RightPanel, {lists: data.lists})),
                )
            );
            return result;
        }
    }
};

m.route.prefix = '';

Object.assign(
    routes,
    {
        "/": Home,
    }
);

m.route(
    vroot,
    "/",
    routes
);

Decrement error: DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Ответы

Возможно будут интересны и другие вопросы