Buton dinamic stergere Div nou adaugat

Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
sterica
Mesaje: 272

Buton dinamic stergere Div nou adaugat

Salutare,
Scriptul meu js adauga noi div-uri la apasarea unui buton, tot la apasarea aceluiasi buton vreau sa mai adaug un buton (langa cel de adaugare) care sa apeleze o functie de stergere a div-urilor adaugate iar stergerea divurilor sa se faca ultimul div creat, primul sters, dar numaratoarea div-urilor sa continue atunci cand se doreste adaugarea de noi div-uri. Cand ramane un singur div butonul de stergere sa dispara.

Cod: Selectaţi tot

<div class="col-3 border-col">
<form id='test'>
<h6>Crearea templeate chestionar</h6>
<div class="form-group">
<label for="NumeChestionar">Nume chestionar</label>
<input type="text" class="form-control" id="NumeChestionar" aria-describedby="emailHelp" placeholder="numele templete chestionar">
<small id="NumeChestionarHelp" class="form-text text-muted">help help.</small>
</div>
<div class="form-group">
<label for="intrebarea1">Intrebarea 1</label>
<input type="text" class="form-control" id="intrebarea1" placeholder="adauga intrebare">
</div>
</form>
<button onclick="addDiv('test');">add</button>
</div>

Cod: Selectaţi tot

<script>
var counterText = 1;
function addDiv(divName){
  var newdiv   = document.createElement('div');
  var newbutton = document.createElement('button')

  newdiv.innerHTML ="<div class='form-group'><label for='intrebarea" + (counterText + 1) + "'>Intrebarea " + (counterText + 1) + "</label><input type='text' class='form-control' id='"+ (counterText + 1) +"' placeholder='adauga intrebare'></div>";
  newbutton.innerHTML = "<button onclick='removeDiv();'>remove</button>";
  counterText++;
  document.getElementById(divName).appendChild(newdiv);
}
</script>
Multumesc!

MarPlo
Salut
Incearca acest script JS la codul html pe care l-ai postat.

Cod: Selectaţi tot

<script>
var div_ix =1;
function addDiv(id_in){
  div_ix++;
  var newdiv ="<div id='new_div"+ div_ix +"' class='form-group'><label for='intrebarea"+ div_ix +"'>Intrebarea "+ div_ix +"</label><input type='text' class='form-control' id='intrebarea"+ div_ix +"' placeholder='adauga intrebare'></div>";
  var btn_remove ="<button id='btn_remove' onclick='removeDiv();'>remove</button>";
  document.getElementById(id_in).insertAdjacentHTML('beforeend', newdiv);
  if(!document.getElementById('btn_remove')) document.getElementById(id_in).insertAdjacentHTML('afterend', btn_remove);
}

function removeDiv(){
  document.getElementById('new_div'+ div_ix).outerHTML ='';
  if(div_ix ==2) document.getElementById('btn_remove').outerHTML ='';
  div_ix--;
}
</script>

sterica
Salutare,

Butonul de remove functioneaza numai cand este new_div2, cand se depaseste valoare de 2, butonul remove nu mai functioneaza.

Multumesc!

sterica
Am rezolvat problema, butonul remove nu avea setat type si facea un submit formului unde se afla.
Dupa ce am definit type='button' functioneaza, insa nu imi explic din ce cauza

Subiecte similare