При нажатии на кнопку удаления удаляется только один элемент

Question

Всем привет. 1. При нажатии на крестик получается удалить только первый тег, второй тег не удаляется ни в какую, где ошибка в моем коде? 2. При вводе названии тега в инпут и нажатии ентер происходит отправка формы, чего я делать не хочу, а хочу, чтоб этот тег добавлялся в теги посредством JavaScript, как это исправить?

    <div class="todo-tasks__wrapper">
    <form action="/<?= APP_BASE_PATH ?>/todo/tasks/editreg" class="todo-tasks__form" method="post">
        <div class="todo-tasks__row-wrapper">
            <div class="todo-tasks__row">
                <div class="todo-tasks__col">
                    <label class="todo-tasks__label">Заголовок</label>
                    <input type="text" name="title" class="todo-tasks__input" value="<?= $_POST['title'] ?>">
                </div>
                <div class="todo-tasks__col">
                    <label class="todo-tasks__label">Напомнить</label>
                    <select name="reminded_at" class="todo-tasks__input-select">
                        <option value="30_minutes" <?= $_POST['reminded_at'] == '30_minutes' ? 'selected' : '' ?>>30 минут</option>
                        <option value="1_hour" <?= $_POST['reminded_at'] == '1_hour' ? 'selected' : '' ?>>1 час</option>
                        <option value="2_hours" <?= $_POST['reminded_at'] == '2_hours' ? 'selected' : '' ?>>2 часа</option>
                        <option value="12_hours" <?= $_POST['reminded_at'] == '12_hours' ? 'selected' : '' ?>>12 часов</option>
                        <option value="24_hours" <?= $_POST['reminded_at'] == '24_hours' ? 'selected' : '' ?>>24 часа</option>
                        <option value="7_days" <?= $_POST['reminded_at'] == '7_days' ? 'selected' : '' ?>>7 дней</option>
                    </select>
                </div>
            </div>
            <div class="todo-tasks__row">
                <div class="todo-tasks__col">
                    <label class="todo-tasks__label">Категория</label>
                    <select name="category" class="todo-tasks__input-select">
                        <?php foreach($toDoCategories as $toDoCategory): ?>
                        <option value="<?= $toDoCategory['title'] ?>"><?= $toDoCategory['title'] ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="todo-tasks__col">
                    <label class="todo-tasks__label">Дата окончания</label>
                    <input type="datetime-local" name="finish_date" class="todo-tasks__input todo-tasks__finish-date" value="<?= $_POST['finish_date'] ?>">
                </div>
            </div>
            <div class="todo-tasks__row">
                <div class="todo-tasks__col">
                    <label class="todo-tasks__label">Статус</label>
                    <select name="status" class="todo-tasks__input-select">
                        <option value="Новая" <?= $_POST['status'] == 'Новая' ? 'selected' : '' ?>>Новая</option>
                        <option value="В прогрессе" <?= $_POST['status'] == 'В прогрессе' ? 'selected' : '' ?>>В прогрессе</option>
                        <option value="Выполнена" <?= $_POST['status'] == 'Выполнена' ? 'selected' : '' ?>>Выполнена</option>
                        <option value="На удержании" <?= $_POST['status'] == 'На удержании' ? 'selected' : '' ?>>На удержании</option>
                        <option value="Отменена" <?= $_POST['status'] == 'Отменена' ? 'selected' : '' ?>>Отменена</option>
                    </select>
                </div>
                <div class="todo-tasks__col">
                    <label class="todo-tasks__label">Приоритет</label>
                    <select name="priority" class="todo-tasks__input-select">
                        <option value="Низкий" <?= $_POST['priority'] == 'Низкий' ? 'selected' : '' ?>>Низкий</option>
                        <option value="Средний" <?= $_POST['priority'] == 'Средний' ? 'selected' : '' ?>>Средний</option>
                        <option value="Высокий" <?= $_POST['priority'] == 'Высокий' ? 'selected' : '' ?>>Высокий</option>
                        <option value="Очень высокий" <?= $_POST['priority'] == 'Очень высокий' ? 'selected' : '' ?>>Очень высокий</option>
                    </select>
                </div>
            </div>
            <div class="todo-tasks__row">
                <div class="todo-tasks__col">
                    <label class="todo-tasks__label">Теги</label>
                    <div class="todo-tasks__tags-wrapper">
                        <div class="todo-tasks__tags-row">
                            <?php

                                $tagNames = array_map(function ($tag) {
                                    return $tag['name'];
                                }, $toDoTags);

                                foreach ($tagNames as $tagName):
                            ?>
                                <div class="todo-tasks__tags-tag-wrapper tag_container">
                                    <div class="todo-tasks__tags-tag"><?= $tagName ?></div>
                                    <button class="todo-tasks__tags-tag-button" type="button">X</button>
                                </div>
                            <?php
                                endforeach;
                            ?>
                        </div>
                        <input type="text" class="todo-tasks__tags-input tag_input">
                        <input type="text" class="tag_input-hidden" value="<?= implode(', ', $tagNames) ?>" hidden>
                    </div>
                </div>
                <div class="todo-tasks__col">
                    <label class="todo-tasks__label">Описание</label>
                    <textarea name="description" cols="20" rows="7" class="todo-tasks__input"><?= $_POST['description'] ?></textarea>
                </div>
            </div>
            <div class="todo-tasks__row">
                <button class="create-user__form-btn">Редактировать</button>
            </div>
        </div>
    </form>
</div>

<script>
    const tagInput = document.querySelector('.tag_input');
    const tagContainer = document.querySelector('.tag_container');
    const tags = document.querySelector('.tag_input-hidden');
    const existingTags = "<?= isset($task['tags']) ? $task['tags'] : '' ?>"
    const tagWrapper = document.querySelector('.todo-tasks__tags-wrapper');

    function createTag(text) {
        const tag = document.createElement('div');
        tag.classList.add('todo-tasks__tags-tag-wrapper', 'tag_container');
        const tagText = document.createElement('div');
        tagText.classList.add('todo-tasks__tags-tag');
        tagText.textContent = text;
        const closeButton = document.createElement('button');
        closeButton.classList.add('todo-tasks__tags-tag-button');

        tag.appendChild(tagText);
        tag.appendChild(closeButton);

        return tag;
    }

    function updateHiddenTags(){
        const tags = tagContainer.querySelectorAll('.tag_container div');
        const tagText = Array.from(tags).map(tag => tag.textContent);
        existingTags.value = tagText.join(', ');
    }

    tagInput.addEventListener('input', (e) => {
        if(e.target.value.includes(', ')){
            const tagText = e.target.value.slice(0, -1).trim();
            if (tagText.length > 1) {
                const tag = createTag(tagText);
                tagContainer.insertBefore(tag, tagInput);
                updateHiddenTags();
            }
            e.target.value = '';
        }
    });

    tagWrapper.querySelectorAll('.tag_container button').forEach(button => {
       button.addEventListener('click', (e) => {
           e.target.parentElement.remove();
           updateHiddenTags();
        })
    });

    tagInput.addEventListener('keydown', (e) => {
        if (e.keyCode == 13) {
            e.preventDefault();
        }
    })
</script>

Answer 1

Думаю основная ошибка: делать querySelectorAll('.tag_container button') у tagContainer. Потому что получается выборка контейнера у контейнера. Надо бы делать выборку у wrapper. Тогда становится получше:

const tagWrapper = document.querySelector('.todo-tasks__tags-wrapper');

tagWrapper.querySelectorAll('.tag_container button').forEach(button =>{
    button.addEventListener('click', (e) => {                
        e.target.parentElement.remove();        
        updateHiddenTags();
    });
});

при нажатии ентер происходит отправка формы, чего я делать не хочу

ну можно повесить конечно обработчик на submit и предотвращать отправку формы. Что-то типа такого:

let input = document.getElementById("input-id"); 
input.onkeypress = function(key) { 
    let btn = 0 || key.keyCode || key.charCode; 

    if (btn == 13) {                 
        key.preventDefault(); 
        return false;
    } 
}

Но более корректным решением будет удаление тега form вовсе. Если он не используется, то какой от него прок?

БЛОГ НА HUSL

При нажатии на кнопку удаления удаляется только один элемент

Ответы (1 шт):