1

Preciso deletar e alterar a plano especifico criado com a variavel lista! sempre que deleto, deleta todas e se eu alterar ele deleta todas e altera uma so!

function planoCriado() {
  var lista;
  lista = document.getElementById("nomeLista").value;
  plan = true;
  window.alert("Plano de Treino " + lista + " criado com sucesso!");
  var quadradoPlano = "Lista de Exercícios: </b> " + lista + '<br> <button onclick="alterarPlano();" style="width:auto;"> Editar Plano </button> ' +
    '<button onclick="deletePlano();" style="width:auto;"> Deletar Plano </button>';

  document.getElementById("addPlano").innerHTML += quadradoPlano;
}

function deletePlano(i) {
  if (confirm("Tem a certeza que quer apagar seu Plano de Treino " + lista + "?")) {

    document.getElementById('addPlano').remove();
  }
}

function alteraPlano(i) {
  if (confirm("Tem a certeza que quer apagar seu Plano de Treino " + lista + "?")) {

   
  }
}
Crie uma lista
<div class="infor" style="clear: both; margin-top: 15px; margin-left: 25px">
  <input type="text" placeholder="MyList" id="nomeLista" class="input_number" /><br>
</div>
<div class="infor" style="clear: both; margin-top: 15px; margin-left: 25px">

  <button type="submit" class="signupbtn" onclick="planoCriado();" id="confirmar">Confirmar</button>
  <button type="submit" class="signupbtn" onclick="planoAlterado();" id="alterar" hidden>Alterar</button>
  <button type="button" onclick="volta_HomePage()" class="cancelbtn"> Cancelar </button>
</div><br>
<div id="addPlano"></div>

meu problema seguinte! criei um plano de exercicio, porem nao consigo deletar a lista especifica com o nome dado a ela, qdo deleto ele deleta tudo, e eu queria apenas a "lista" definida!

var lista;

function planoCriado() {
  lista = document.getElementById("nomeLista").value;

  if (data == "")
    window.alert("Data inválida");
  else if (duracao == "")
    window.alert("Duração inválida");
  else if (dieta == "")
    window.alert("Dieta inválida");
  else if (refeicao == "")
    window.alert("Refeicao inválida");
  else if (lista == "")
    window.alert("Lista de Exercícios inválida");
  else {
    plan = true;
    window.alert("Plano de Treino " + lista + " criado com sucesso!");
    volta_HomePage();

    var quadradoPlano = "<div class='infor' > <b> Dia </b> " + data + "<br><b> Duracão: </b> " + duracao + " Horas <br><b>Frequencia:</b>" + frequencia + "<b><br> Dieta:</b> " + dieta + " <br><b> Refeição: </b> " + refeicao + "<br><b> Lista de Exercícios: </b> " + lista +
      '<br> <button onclick="alterarPlano();" style="width:auto;"> Editar Plano </button> ' +
      '<button onclick="deletePlano();" style="width:auto;"> Deletar Plano </button>';

    document.getElementById("addPlano").innerHTML += quadradoPlano;
  }
}
/*deletar*/
function deletePlano(d) {
  if (confirm("Tem a certeza que quer apagar seu Plano de Treino " + lista + "?")) {

    document.getElementById('addPlano').remove();
  }
}
<div class="infor" style="clear: both; margin-top: 15px; margin-left: 25px">
  <input type="text" placeholder="MyList" id="nomeLista" class="input_number" /><br><button onclick="irExercicios();" id="botaoCriaLista">Fazer lista de Exercicios</button>
</div>
<div class="infor" style="clear: both; margin-top: 15px; margin-left: 25px">
  <button type="submit" class="signupbtn" onclick="planoCriado();" id="confirmar">Confirmar</button>
  <button type="submit" class="signupbtn" onclick="planoAlterado();" id="alterar" hidden>Alterar</button>
  <button type="button" onclick="volta_HomePage()" class="cancelbtn"> Cancelar </button>
</div>
abaixo o codigo de alteração!!!

function planoAlterado() {

data = document.getElementById("calendario").value;
duracao = document.getElementById("timestop").value;
frequencia = document.getElementById("frequencia").value;
var alldieta = document.getElementsByName("tipo");
console.log(alldieta);
for (var i = 0, length = alldieta.length; i < length; i++) {
if (alldieta[i].checked) {
    dieta = alldieta[i].value;
    break;
}
}
var allrefeicao1 = document.getElementsByName("tipoP");
var allrefeicao2 = document.getElementsByName("tipoO");
var allrefeicao3 = document.getElementsByName("tipoV");
var allrefeicao4 = document.getElementsByName("tipoVe");
for (i = 0, length = allrefeicao1.length; i < length; i++) {
if (allrefeicao1[i].checked) {
    refeicao = allrefeicao1[i].value;
    break;
}
}
for (i = 0, length = allrefeicao2.length; i < length; i++) {
if (allrefeicao2[i].checked) {
    refeicao = allrefeicao2[i].value;
    break;
}
}
for (i = 0, length = allrefeicao3.length; i < length; i++) {
if (allrefeicao3[i].checked) {
    refeicao = allrefeicao3[i].value;
    break;
}
}
for (i = 0, length = allrefeicao4.length; i < length; i++) {
    if (allrefeicao4[i].checked) {
        refeicao = allrefeicao4[i].value;
        break;
    }
}

lista = document.getElementById("nomeLista").value;

if(data == "")
  window.alert("Data inválida");
else if(duracao == "")
  window.alert("Duração inválida");
else if(dieta == "")
  window.alert("Dieta inválida");
else if(refeicao == "")
  window.alert("Refeicao inválida");
else if(lista == "")
  window.alert("Lista de Exercícios inválida");
else{
    plan = true;
window.alert("Plano de Treino " + lista + " alterado com sucesso!");
volta_HomePage();

var quadradoPlano = 
	"<div class='infor' > <b> Dia </b> " + data + 
	"<br><b> Duracão: </b> " + duracao + 
	" Horas <br><b>Frequencia:</b>"+ frequencia +
	"<b><br> Dieta:</b> " +   dieta + 
	" <br><b> Refeição: </b> " + refeicao + 
	"<br><b> Lista de Exercícios: </b> " + lista +
    '<br> <button onclick="alterarPlano();" style="width:auto;"> Editar Plano </button> ' +
    '<button onclick="deletePlano();" style="width:auto;"> Deletar Plano </button>';

document.getElementById("addPlano").innerHTML = quadradoPlano;
	
function deletePlano(i){
  if (confirm("Tem a certeza que quer apagar seu Plano de Treino " + lista +"?")) {
document.getElementById('addPlano').remove()
document.location.reload(true);
  }
}
}
}

4
  • ja tentei document.getElementById('addPlano').remove()+=lista; mas nao deu certo! Commented 22/05/2018 às 15:22
  • Qual lista é para deletar ? Quando clica onde ? Onde está o elemento html com o id addPlano ? Procure criar um Exemplo minimo verificavel do problema para ser facil de ajudar.
    – Isac
    Commented 22/05/2018 às 15:35
  • @isac quando eu crio planos tenho que colocar o nome das listas de exercicios criados, cada um tem seu nome como 'lista x' preciso deletar a 'lista x selecionada' Commented 22/05/2018 às 15:45
  • @Isac um exemplo criado Commented 22/05/2018 às 16:05

1 Resposta 1

1

Seu código tem alguns problemas e fiz uma organização nele. Mas o problema principal mesmo é que você está adicionando elementos dentro de uma div container com id #addPlano e depois removendo a mesma. Isso irá resultar em erro porque depois se você quiser adicionar outros elementos nela, ela não irá existir mais.

O que você tem que fazer é adicionar itens à essa div e depois remover apenas esses itens adicionados, e não o container todo. Além do que seu código mostra variáveis que não existem, como data, duracao, dieta etc. Mas eu ajustei o código para que funcione a parte de remover um item adicionado. Essa parte dessas variáveis você consegue ajustar no seu código original.

Outra coisa é essa função volta_HomePage() que é chamada antes de inserir um item ao container: verifique também se não seria o caso dela ser chamada depois.

Para remover um item adicionado, você precisa colocar algum tipo de identidade a ela. O que fiz foi adicionar um dataset à div para pode pegar posteriormente seu nome:

                           dataset
                              ↓
var quadradoPlano = "<div data-lista='"+ lista +"' class='infor'>"
...

E adicionei this como parâmetro da função deletePlano, para ter uma referência da div onde o botão foi clicado:

...                             ↓
+"<button onclick='deletePlano(this)' style='width:auto;'>Deletar Plano</button>"
...

Vamos ao código com a função de deletar funcionando:

var lista;

// variaveis faltando
data = "01/01/0001";
duracao = "01";
dieta = "dieta";
refeicao = "refeicao";
frequencia = "freq";

// função faltando
function volta_HomePage(){
}

function planoCriado(){
   lista = document.getElementById("nomeLista").value;
   
   if (data == "")
      window.alert("Data inválida");
   else if (duracao == "")
      window.alert("Duração inválida");
   else if (dieta == "")
      window.alert("Dieta inválida");
   else if (refeicao == "")
      window.alert("Refeicao inválida");
   else if (lista == "")
      window.alert("Lista de Exercícios inválida");
   else {
      plan = true;
      window.alert("Plano de Treino " + lista + " criado com sucesso!");
      volta_HomePage();
   
      var quadradoPlano = "<div data-lista='"+ lista +"' class='infor'>"
      +"<b>Dia</b> "+ data +"<br>"
      +"<b>Duracão:</b> "+ duracao +" Horas<br>"
      +"<b>Frequencia:</b> "+ frequencia +"<br>"
      +"<b>Dieta:</b> "+ dieta +"<br>"
      +"<b>Refeição:</b> "+ refeicao +"<br>"
      +"<b>Lista de Exercícios:</b> "+ lista +"<br>"
      +"<button onclick='alterarPlano()' style='width:auto;'>Editar Plano</button>"
      +"<button onclick='deletePlano(this)' style='width:auto;'>Deletar Plano</button>"
      +"</div>";
      
      document.getElementById("addPlano").innerHTML += quadradoPlano;
   }
}

/*deletar*/
function deletePlano(d) {
   var bloco = d.parentNode; // pego a div mãe do botão
   var lista = bloco.dataset.lista; // pego o dataset da div capturada acima
   if(confirm("Tem a certeza que quer apagar seu Plano de Treino " + lista + "?")){
      bloco.remove(); // remove a div capturada
   }
}
<div class="infor" style="clear: both; margin-top: 15px; margin-left: 25px">
  <input type="text" placeholder="MyList" id="nomeLista" class="input_number" /><br><button onclick="irExercicios();" id="botaoCriaLista">Fazer lista de Exercicios</button>
</div>
<div class="infor" style="clear: both; margin-top: 15px; margin-left: 25px">
  <button type="submit" class="signupbtn" onclick="planoCriado();" id="confirmar">Confirmar</button>
  <button type="submit" class="signupbtn" onclick="planoAlterado();" id="alterar" hidden>Alterar</button>
  <button type="button" onclick="volta_HomePage()" class="cancelbtn"> Cancelar </button>
</div>
<div id="addPlano"></div>

0

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 .