-2

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

Quando vou editar uma tarefa, é esse form que apresenta. Clicando fora do form queria que seja removido

1 Resposta 1

-2

Não sei que tipo de biblioteca ou framework tu utilizou pra fazer o projeto, mas se for só JavaScript, tem um jeito rapidinho de fazer isso:

window.document.addEventListener('click', event => {
    let formulario = document.querySelector("#form-editar")
    if(!!formulario && event.target !== formulario)
        formulario.remove()
})

O código anterior é bem simples, ele adiciona um listener de clique ao documento inteiro, então ele faz a seleção do id do formulário. Se o formulário selecionado existir e o objeto clicado for diferente, ele exclui o formulário.

Tem formas mais legais de fazer isso, mas não sei como tu tá fazendo, então se fosse no meu caso, eu colocaria alguma animação tanto pra ele aparecer quanto pra ele sumir, mas pelo que eu entendi, só excluir o objeto já funciona no teu caso.

Espero que tenha ajudado

2
  • Não estou usando nenhum frame. Testei seu código, ele funcionou em partes, mas ainda esta com um erro. Pois quando o usuário clicar para editar a tarefa o formulário não esta aparecendo pios o evento de click tá capturando e já removendo o form.
    – Flávio
    28/11/2021 às 16:12
  • Declara uma variável antes do if que seleciona o objeto que edita e muda o if pra if(!!formulario && event.target !== formulario && event.target !== variavelDeclarada) 29/11/2021 às 17:21

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .