Estou criando um formulário dinamicamente para editar uma tarefa. Se eu clicar na edição da tarefa abaixo, outro formulário correspondente a tarefa vai aparecer e assim por diante. Preciso atualizar a página para que os formulários desapareçam. O que preciso é quando clicar fora do formulário o mesmo seja removido. Podem me mostrar como posso estar implementando isso.
function editarTarefa(id, txt_tarefa){
//criando um formulario para fazer a edição da tarefa
let form = document.createElement("form")
form.action = "tarefa_controller.php?acao=atualizar"
form.method = "post"
form.className = "row"
form.id = "form-editar"
//criar um input para a entrada do texto
let inputTarefa = document.createElement("input")
inputTarefa.type = "text"
inputTarefa.name = "tarefa"
inputTarefa.className = "col-1 inputTarefaAtualizar"
inputTarefa.value = txt_tarefa
//criar um input hidden para o id da tarefa
let inputId = document.createElement("input")
inputId.type = "hidden"
inputId.name = "id"
inputId.value = id
//criar um button para enviar o formulario
let button = document.createElement("button")
button.type = "submit"
button.className = "col-3 btn btn-info"
button.innerHTML = "<i class='icones far fa-edit'/>"
//incluir inputTarefa no form
form.appendChild(inputTarefa)
//incluir inputId no form
form.appendChild(inputId)
//incluir button no form
form.appendChild(button)
//selecionar a div tarefa
let tarefa = document.getElementById("tarefa_"+id)
//limpar o texto da tarefa para a inclusão do form
tarefa.innerHTML = " "
//incluir o form na pagina
tarefa.insertBefore(form, tarefa[0])
Quando vou editar uma tarefa, é esse form que apresenta. Clicando fora do form queria que seja removido