films-symfony-4-2/assets/js/addCollectionVanilla.js

import { autocomplete } from './autocomplete'

(() => {
    document
        .querySelectorAll('ul.collection-form li')
        .forEach(item => {
            item.querySelector('input').readOnly = true
            addDeleteLink(item)
        });

    document
    .querySelectorAll('.add_item_link')
    .forEach(btn => {
        btn.addEventListener("click", addFormToCollection)
    });

    function addFormToCollection(e) {
        const collectionHolder = document.querySelector('#' + e.currentTarget.dataset.collectionHolderId);
        const path = e.currentTarget.dataset.path ?? '';
    
        const item = document.createElement('li');
        item.className = collectionHolder.dataset.classLi
    
        item.innerHTML = collectionHolder
        .dataset
        .prototype
        .replace(
            /__name__/g,
            collectionHolder.dataset.index
        );

        if (path !== '') {
            autocomplete(item, path);
        }

        collectionHolder.appendChild(item);

        addDeleteLink(item);
    
        collectionHolder.dataset.index++;
    };

    function addDeleteLink(item) {
        const input = item.querySelector('input') ?? item.querySelector('select');
        const deleteLink = document.createElement('button');
        deleteLink.type = 'button';
        deleteLink.className = 'btn btn-outline-secondary';
        const i = document.createElement('i');
        i.className = 'fa fa-trash fa-lg text-danger';
        deleteLink.appendChild(i);

        deleteLink.addEventListener("click", (event) => {
            item.remove();
            event.preventDefault(); // évite qu'un # apparaisse dans l'URL
        });

        input.after(deleteLink);
    };
})();