delete javascript content by name

Asked

Viewed 35 times

1

I need to delete and change the specific plan created with the list variable! Whenever I delete, delete all and if I change it deletes all and changes one!

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>

my next problem! I created an exercise plan, but I can’t delete the specific list with the name given to it, when it deletes everything, and I just wanted the defined "list"!

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>
below the change code!!!

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);
  }
}
}
}

javascript html5

  • already tried Document.getElementById('addPlano'). remove()+=list; but did not work!

  • Which list is to delete ? When click where ? Where is the html element with the id addPlano ? Seek to create a Minimum checkable example of the problem to be easy to help.

  • @Isac when I create plans I have to put the name of the created exercise lists, each one has its name as 'list x' I need to delete the 'list x selected'

  • @Isac a created example

1 answer

1


Your code has some problems and I made an organization in it. But the main problem is that you are adding elements within a div container with id #addPlano and then removing it. This will result in error because then if you want to add other elements to it, it will no longer exist.

What you have to do is add items to this div and then remove only those added items, and not the container all. In addition your code shows variables that do not exist, as data, duracao, dieta etc. But I have adjusted the code so that it works to remove an added item. This part of these variables you can adjust in your original code.

Another thing is this function volta_HomePage() which is called before inserting an item into the container: also check if it would not be the case that she was called after.

To remove an added item, you need to put some sort of identity to it. What I did was add a dataset à div so you can catch your name later:

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

And added this as a function parameter deletePlano, to have a reference to the div where the button was clicked:

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

Let’s go to the code with the function of deleting working:

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>

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.