delete javascript content by name

Question

delete javascript content by name

Navigation

#1 by (1 votes)

1

I need to delete and change the specific plan created with the variable list! every time I delete, deletes all and if I change it deletes all and changes one 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>

My next problem! I created a workout plan, but I can not delete the specified list with the name given to it, when the deletion deletes everything, and I just wanted the "list" defined!

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

asked by anonymous 22.05.2018 / 17:11

1 answer

React build vs (?) Webpack? Create bat to finish Service

score 1 · Accepted Answer

Your code has some problems and I've made an organization in it. But the main problem is that you're adding elements inside a% container with div id and then removing it. This will result in an 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 #addPlano and then remove only those added items, not the container . In addition your code shows variables that do not exist, such as div , data , duracao etc. But I've adjusted the code to work the part of removing an added item. This part of these variables you can adjust in your original code.

Another thing is this dieta function that is called before inserting an item into container : also check if it would not be the case to be called later.

To remove an item added, you need to put some sort of identity in it. What I did was add a dataset to volta_HomePage() so I can later get its name:

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

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

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

Let's code with the delete function 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>