Na aula o professor menciona sobre o método remove(). Mas observei que toda vez que se usa um método, ele geralmente no VS Code, tem uma cor específica e não tem 2 parênteses. Já, quando usa uma função reservada do javascript, ela também além da cor ser diferente, ela tem 2 parênteses na frente. Nesse caso o remove() não é uma função?

Código completo

// Função de invocação imediata ==> Vamos utilizar a “IIFE”, ou Immediately Invoked Function Expression ou “Função de Invocação Imediata”. Faz com o que ninguém tenha acesso a nenhuma função de dentro do código, apenas tenha acesso a interação com a página
(() => {

    const criarTarefa = (evento) => {

        evento.preventDefault();

        const lista = document.querySelector('[data-list]');
        const input = document.querySelector('[data-form-input]');
        const valor = input.value;

        const tarefa = document.createElement('li'); /* Cria um novo elemento */
        tarefa.classList.add('task'); /* Adciona a classe na 'li' criada */
        const conteudo = `<p class="content">${valor}</p>`; /* “Template String” */

        tarefa.innerHTML = conteudo; /* Faz aparecer a tag 'p' com o seu valor dentro das chaves */

        tarefa.appendChild(BotaoConclui()); /* Cria o botão através da função, com escrita, estilo e evento de click */
        tarefa.appendChild(BotaoDeleta());
        lista.appendChild(tarefa); /* Cria(anexa) o elemento filho dentro do elemento pai */
        input.value = " ";
    }

    const novaTarefa = document.querySelector('[data-form-button]');

    novaTarefa.addEventListener('click', criarTarefa);

    const BotaoConclui = () => {
        const botaoConclui = document.createElement('button');

        botaoConclui.classList.add('check-button'); // add => adiciona o nome da classe que está entre as aspas simples
        botaoConclui.innerText = 'concluir'; // Adciona o texto que está entre as aspas simples dentro do botão

        botaoConclui.addEventListener('click', concluirTarefa);

        return botaoConclui;
    }

    const concluirTarefa = (evento) => {
        const botaoConclui = evento.target; // sabe qual o alvo do evento, ou seja, em quem clicou ou qual elemento foi clicado

        const tarefaCompleta = botaoConclui.parentElement; // Sobe um nó na árvore, que é a 'li', ou seja, busca o pai do elemento que é pai do botão

        tarefaCompleta.classList.toggle('done'); // .toggle() => Método que executa o efeito de rabisco do CSS e é capturado a classe pelo 'classList'. o toggle faz um verdadeiro ou falso (booleano)
    }

    const BotaoDeleta = () => { // inicia com letra maiúscula pelo motivo de ser um Componente
        const botaoDeleta = document.createElement('button');

        botaoDeleta.innerHTML = 'Deletar';
        botaoDeleta.addEventListener('click', deletarTarefa);

        return botaoDeleta;
    }

    const deletarTarefa = (evento) => {
        const botaoDeleta = evento.target;

        const tarefaCompleta = botaoDeleta.parentElement;

        tarefaCompleta.remove(); // método(função) que remove

        return botaoDeleta;
    }

})(); //função de invocação imediata


/* “inner HTML” => altera o valor da li */

/* classList => Acessa a lista de classe que a 'li' disponibiliza. */

/* addEventListener => adciona um evento de escuta */

/* addEventListener('click') => captura o click através do evento de escuta. Esse evento fica escutanto se haverá algum click.

/* appendChild => Existem outros métodos que podemos utilizar para manipular nós:

insertBefore(pai, filho): Coloca um nó antes do outro.
replaceChild( elemento1, elemento2): Substitui o nó elemento 1 pelo nó elemento2.
removeChild(elemento): Remove um nó da árvore. */