Почему этот узел div не является дочерним по отношению к контейнеру? - PullRequest
Новая
       17

Почему этот узел div не является дочерним по отношению к контейнеру?

0 голосов
/ 27 марта 2020

Разработка Etch-A-Sketch - я создал сетку 16 * 16, используя 2 для циклов - один вложенный в другой. 

        const div =  document.createElement('div');
        div.style.cssText = 'flex: 1';
        container.appendChild(div);
        // div.addEventListener('mouseover', changeBackground);
        for (let j = 0; j < 16; j++){
            const div2 = document.createElement('div');
            div2.classList.add('square');
            div.style.display = 'flex';
            div.appendChild(div2);

В этом для l oop я создаю div и присваиваю его const div, после чего он добавляется в качестве узла CHILD к контейнеру - const container = document.querySelector('.container');. Во внутреннем для l oop const div2 = document.createElement('div'); присваивается как дочерний элемент для const div во внешнем l oop, потому что div2 - квадраты на сетке. Итак, дерево DOM выглядит так:

DOM tree for EtchASketch project -

В данный момент я хочу настроить прослушиватель событий, который будет срабатывать, когда пользователь нажимает на кнопку, чтобы дать им возможность установить сетку по своему выбору - (т.е. приглашение, которое просит их ввести число от 2 до 64, а затем аналогичным образом я хочу перебрать l oop переменных i и j - столько раз, сколько предложил пользовательский ввод, а затем сгенерировать входную сетку ввода *. Однако первое, что мне нужно сделать, это очистить сетку от существующих 16 * 16 квадратов - вот где я решил использовать removeChild() метод и удалить const div из container и удалить const div2 из const div. Я могу успешно вызвать и удалить div.removeChild(div2);. Однако я сталкиваюсь с ошибкой - Uncaught DOMException: Failed to execute ' removeChild 'on' Node ': удаляемый узел не является потомком этого узла , когда я запускаю container.removeChild(div);. Я уже несколько раз искал ошибку и видел, что вы не можете удалить потомков usi Однако, используя метод removeChild() из приведенного выше дерева DOM, я почти уверен, что div является дочерним по отношению к элементу container. Итак, мой вопрос: что является причиной этой ошибки и как я могу go исправить ее? Имеет ли это какое-то отношение к container, имеющему своего родителя - containerBorder? 

              //sets grid depending on what number the user specifies.
                container.removeChild(div);
                // let userPrompt = prompt('Generate a grid: Enter a number between 2 and 100: ');
                // let input = Number.parseInt(userPrompt, 10);
                // container.removeChild(div);
                // div.removeChild(div2);
                // console.log(typeof input);
                // for(let i = 0; i < 16; i++){
                //     let div = document.createElement('div');
                //     div.style.cssText = 'border: 1px solid black; flex: 1';
                //     container.appendChild(div);

                //     for (let j = 0; j < 16; j++){
                //         let div2 = document.createElement('div');
                //         div2.classList.add('square');
                //         div2.style.display = 'flex';
                //         div.appendChild(div2);
                //     }
                // }

            });

Полный код здесь - https://codepen.io/safdari/pen/oNXJBGY

1 Ответ

0 голосов
/ 27 марта 2020

container.innerHTML = '' очистит контейнер и позволит мне сделать его заново

...