Remove content after added in javascript

Asked

Viewed 148 times

1

I’m adding a reason, until then ok, delete the first reason, but the added ones I can’t delete!

var antes = 'Bem estar psicológico <img src="delete.png" style="width: 1cm" onclick="deleteMot(' + '"Bem estar psicológico"' + ');"> <br>';


function addMotivo() {
  var mot = document.getElementById("newMotivo").value;
  if (mot != "") {
    antes = antes + mot + ' <img src="delete.png" style="width: 1cm" onclick="deleteMot("' + mot + '");"> <br>';
    document.getElementById("motivos").innerHTML = antes;
    document.getElementById("newMotivo").value = "";
  } else {
    window.alert("Motivo inválido");
  }
}

function deleteMot(i) {
  if (confirm("Tem a certeza que quer apagar?")) {
    var r = i + ' <img src="delete.png" style="width: 1cm" onclick="deleteMot("' + i + '");"> <br>';
    antes = antes.replace(r, '');
    document.getElementById("motivos").innerHTML = antes;
  }
}
fieldset {
  border: none;
}

label {
  display: block;
  cursor: pointer;
}

.remove {
  color: black;
  font-weight: bold;
  text-decoration: none;
}
<html>

<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
</head>

<body>
  <div class="infor" style="clear: both;"><b>Motivos</b></div>
  <div class="infor" style="clear: both; margin-top: 7px;">

    <input type="text" id="newMotivo" placeholder="Ficar atraente">
    <button onclick="addMotivo();" style="width: auto">Adicionar Motivo: </button>

  </div>
  <div class="infor" id="motivos" style="clear: both; margin-top: 7px; color: #CC720E;"><b>Bem estar psicologico</b>
    <img src="delete.png" style="width: 18px" onclick="deleteMot('Bem estar psicológico');" alt="" />
  </div>


</body>

</html>

javascript html5

  • obd david by editing

  • never use getElementById use getElementsByClassName that would be: document.getElementsByClassName("motivo" + i)

  • The problem is because you are trying to access an identifier that is duplicated, or tripled... It needs to be a class in order to be multiplied.

  • how do I do it Lollipop

2 answers

2


The problem is in the concatenations you are making, which is causing string breakage. You can use simple quotes and escape them:

In this line:

var antes = 'Bem estar psicológico <img src="delete.png" style="width: 1cm" onclick="deleteMot(\'Bem estar psicológico\');"> <br>';

In this:

antes = antes + mot + ' <img src="delete.png" style="width: 1cm" onclick="deleteMot(\'' + mot + '\');"> <br>';

And in this:

var r = i + ' <img src="delete.png" style="width: 1cm" onclick="deleteMot(\'' + i + '\');"> <br>';

Only also you’re doing it in a terrible way, doing replace strings. I suggest using a list creating ids in a dynamic way for each <li>:

var novoid = parseInt(document.querySelectorAll('#motivos li').length)+1; // variável que irá incrementar novas id's
function addMotivo() {
   var mot = document.getElementById("newMotivo").value;
   if (mot != "") {
      
      var antes = document.getElementById("motivos").innerHTML;
       antes += '<li id="listaMotivos'+ novoid +'"><b>'+ mot +'</b> <img src="https://png.icons8.com/metro/1600/delete.png" style="width: 1cm" onclick="deleteMot(\'' + novoid + '\');"></li>';
       document.getElementById("motivos").innerHTML = antes;
       document.getElementById("newMotivo").value = "";
       novoid++;
   }
   else {
       window.alert("Motivo inválido");
   }
}

function deleteMot(i){
  if (confirm("Tem a certeza que quer apagar?")) {
    document.getElementById("listaMotivos"+i).outerHTML = "";
  }
}
fieldset { border: none; }
label { display: block; cursor: pointer;}
.remove { color:black;font-weight:bold;text-decoration:none; }
ul,li{
   list-style: none;
   margin: 0;
   padding: 0;
}
<div class="infor" style="clear: both;"><b>Motivos</b></div>
<div class="infor" style="clear: both; margin-top: 7px;">

<input type="text" id="newMotivo" placeholder="Ficar atraente"> 
<button onclick="addMotivo();" style="width: auto">Adicionar Motivo: </button>

</div>
<ul class="infor" id="motivos" style="clear: both; margin-top: 7px; color: #CC720E;">
   <li id="listaMotivos1">
      <b>Bem estar psicologico</b>
      <img src="https://png.icons8.com/metro/1600/delete.png" style="width: 18px" onclick="deleteMot('1');" alt="" />
   </li>
</ul>

  • perfect the answer...thank you very much

  • thank you so much for your help

  • 1

    I updated the answer with an even better suggestion. Be sure to mark the answer with to give as solved. Abs!

  • Hello Evandro! The answer did not solve the problem? It is important to mark if you have resolved so that the question is not open, or you can tell us what is missing so that we can improve the answer.

  • sorry @dvd ...now made

  • can help me in the new question I asked?

Show 1 more comment

1

Follows a refactoring:

var list = document.getElementById('motivos');
var lastid = 0;

function changeText2() {
    var firstname = document.getElementById('motivo').value;
    document.getElementById('anteriores').innerHTML = firstname;
    var entry = document.createElement('li');
    entry.appendChild(document.createTextNode(firstname));
    entry.setAttribute('id','item'+lastid);
    entry.setAttribute('data-name',firstname); //adicionou um atributo para facilitar o acesso ao nome
    var removeButton = document.createElement('button');
    removeButton.appendChild(document.createTextNode("remove"));
    removeButton.setAttribute('onClick','removeName("'+'item'+lastid+'")');
    entry.appendChild(removeButton);
    lastid+=1;
    list.appendChild(entry);
}


function removeName(itemid){
    var item = document.getElementById(itemid);
    list.removeChild(item);
}

function getNames(){
    var names = [];
    for(var i=0;i<list.children.length;i++){
        names.push(list.children[i].getAttribute("data-name"));//obter atributo definido anteriormente e adicionar ao array
    }
    return names;
}
fieldset {
  border: none;
}

label {
  display: block;
  cursor: pointer;
}

.remove {
  color: black;
  font-weight: bold;
  text-decoration: none;
}
Digite seu motivo:
<input type="text" id="motivo">
<br>
<p>Último motivo adicionado: <b id='anteriores'></b> 
</p>

<ol id="motivos"></ol>
<input type='button' onclick='changeText2()' value='Adicionar' />
<input type='button' onclick='alert(getNames())' value='Modal motivos' />

  • cool too, but the dvd did what I needed to adjust, but I’ll positive you too

  • @Evandroaguiar I hope I helped.

  • I thank you for

Browser other questions tagged javascript html5

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