Problema com Table como pai

Boa, na época que fiz o curso havia implementado da maneira abaixo:

var tabela = document.querySelector('table');

tabela.addEventListener('dblclick', function(event) {
    if (event.target.tagName == 'TD') {
        event.target.parentNode.classList.add('fadeOut');
        setTimeout(() => event.target.parentNode.remove(), 500);

    }
});

tabela.addEventListener('click', event => event.target.setAttribute('draggable', 'true'));

Pergunto se o elemento é uma TD para poder removê-lo.

Mas com certeza sua sacada é muito mais simples e não precisaria desse if.

setTimeout(() => event.target.parentNode.remove(), 500);
setTimeout(event.target.parentNode.remove(), 500);

()=> o que isso significa ? E porque a segunda linha não funciona ?

Jaime, me desculpe pela demora.

setTimeout é uma função. Geralmente passamos para ela 2 argumentos:

1. Uma função.
2. Um inteiro representando o tempo em milissegundos

A funcionalidade da função setTimeout é executar a função passada como primeiro argumento após o tempo em milissegundos passado como segundo argumento.

Considerando o que foi explicado acima, podemos ter o seguinte código:

// Declara a função `imprimeOlaMundo`
function imprimeOlaMundo () {
    console.log('Olá mundo!')
}

// Registra a função `imprimeOlaMundo` para ser executada após 1000 milissegundos (1 segundo)
setTimeout(imprimeOlaMundo, 1000)

// Após 1 segundo:
// Olá mundo!

Uma coisa bem legal do JavaScript é que ele te permite criar uma função como uma expressão, isto é, sem precisar declará-la explicitamente como fizemos. Para isso podemos utilizar uma expressão de função sem nome:

// Cria (utilizando uma expressão de função) e registra a função  para ser executada após 1000 milissegundos (1 segundo)
setTimeout( function () { console.log('Olá mundo!') }, 1000 )

// Acima ainda estou passando 2 argumentos para a função `setTimeout`. 
// O primeiro é uma expressão de função que antes será avaliada
// pelo JavaScript para criar uma função, assim a passando como argumento.

// Após 1 segundo:
// Olá mundo!

Bom, a partir da versão 6 da especificação da linguagem, ou ES2015, foi adicionada uma nova sintaxe para a criação de expressões de função. Batizada de "arrow function" ou, "função flecha".

Além de trazer uma sintaxe mais simples e curta, ela "vincula o valor de this de maneira léxica" como aponta o artigo da mozilla. Esta última parte não é relevante para responder sua dúvida e não explicarei aqui, porém é explicado nos treinamentos avançados de JavaScript da Alura.

Abaixo as 2 sintaxes de expressões de função:

function () {    console.log('Olá mundo!') }

() => { console.log('Olá mundo!') }

Para ficar ainda mais simples, é possível remover o bloco (as chaves) caso você não tenha múltiplos statements (não conheço uma boa tradução, talvez declarações). Explicando de maneira breve, um statement é como se fosse uma frase/sentença de um idioma, que termina com algum tipo de pontuação. Então cada statement seria uma frase, que em JavaScript termina com ; (ponto e vírgula). Retornando ao assunto, se você tem apenas um statement para ser executado na sua arrow function (o que é nosso caso), podemos remover as chaves:

() => console.log('Olá mundo!')

Ao remover o bloco haverá um retorno implícito do nosso statement (que no nosso caso não faz diferença). Ou seja, o código exibido acima seria o mesmo que:

() => { return console.log('Olá mundo!') }

Após toda essa enrolação, vamos ao seu exemplo de código:

setTimeout(event.target.parentNode.remove(), 500);

Novamente estamos passando 2 argumentos para a função setTimeout. O primeiro uma função, e o segundo o tempo em milisegundos, certo?

Errado! No primeiro argumento você está chamando/invocando (pois você abriu e fechou parêntesis após o nome da função) a função remove, não passando ela como argumento. Isto significa que a função remove será executada e o retorno dela será o primeiro argumento para a função setTimeout. Mas o que remove retorna? Nada. E no JavaScript quando uma função não retorna algo explicitamente, implicitamente é retornado o valor undefined, isto significa no final das contas que após o JavaScript executar sua função remove seu código seria parecido com isso:

setTimeout(undefined, 500);

O que não faz muito sentido... ahh e como a função foi executada para gerar este argumento, ela obviamente foi executada, ou seja, o elemento é removido no mesmo instante.

Já quando utilizamos a sintaxe de "arrow function" (ou uma expressão de função comum), estamos realmente criando uma função naquele instante, e esta função criada sim será realmente passada como argumento. Sendo executada após o intervalo definido.

Notei isso também, mas mandei direto no tbody ao invés do id dele, porque antes havia sido aplicado diretamente na tag table. Há alguma questão de boas práticas nesse caso (tag ou id)? Deixei salvo aqui das duas formas comentando uma só pra conhecimento, assim como já aproveitei pra testar o arrow function que o Pedro Ávila citou e deixar salvo aqui também.