Remove Only an Item from a javascript list

Navigation
1

Good afternoon gentlemen, I have an element that creates several items in a list. 

function addParagrafo() {
  var ul = document.getElementById("lista-paragrafos");
  var conteudo = document.getElementById("paragrafo").value;
  ul.innerHTML += "<div class='panel-body'><li>" + conteudo + "<br><br> <div class ='col-xs-12'><button type='button' class='btn-remover btn-default'><i class='fa fa-minus'></i> Remover</button><button type='button' class='btn-tabelas btn-primary' ><i class='fa fa-plus'></i> Tabelas</button><button type='button' class='btn-imagens btn-primary'><i class='fa fa-plus'></i> Imagens</button></div></li></div>";

  var lis = document.getElementById("lista-paragrafos").getElementsByTagName('li');
  for (var i = 0; i < lis.length; i++) {
    var list = lis[i].className = 'itens-checklist:' + i;
  }
  var btn = ul.getElementsByTagName('button');
  for (var i = 0; i < btn.length; i++) {
    btn[i].className += ' pull-right btn btn-xs btn-checklist: ' + list;
  }


}
<ul id="lista-paragrafos">
</ul>
<div class="panel-body">
  <textarea rows="3" id="paragrafo" name="checklist" class="form-control "></textarea>
  <br>
  <button type="button" class="btn-xs btn btn-default pull-right" title="Adicionar este parágrafo" onclick="addParagrafo()"><i class="fa fa-plus">Adcionar</i>
  </button>
  <span class="help-block">Digite ou altere o objeto referente aos documentos da sua inspeção.</span>

But I need to click on "Remove" and it deletes the object itself, I'm having difficulties to solve it, so I would like a light because I started to 'program' a little time and did not find anything really explanatory in javascript, only in jquery.

    
asked by anonymous 22.07.2015 / 21:17

2 answers

2

You can use this function : 

  var node = document.getElementById(id);
  if (node.parentNode) {
    node.parentNode.removeChild(node);
  }

And then just put a id in div that has the content you're adding dynamically, something like this:

<div id='div"+k+"' class='panel-body'>

And finally refer to this div in the onclick of the remove button:

<button type='button' class='btn-remover btn-default' onclick='delParagrafo("+k+")'> 

var k = 0;

function addParagrafo() {
  k++;
  var ul = document.getElementById("lista-paragrafos");
  var conteudo = document.getElementById("paragrafo").value;
  ul.innerHTML += "<div id='div"+k+"' class='panel-body'><li>" + conteudo + "<br><br> <div class ='col-xs-12'><button type='button' class='btn-remover btn-default' onclick='delParagrafo("+k+")'><i class='fa fa-minus'></i> Remover</button><button type='button' class='btn-tabelas btn-primary' ><i class='fa fa-plus'></i> Tabelas</button><button type='button' class='btn-imagens btn-primary'><i class='fa fa-plus'></i> Imagens</button></div></li></div>";

  var lis = document.getElementById("lista-paragrafos").getElementsByTagName('li');
  for (var i = 0; i < lis.length; i++) {
    var list = lis[i].className = 'itens-checklist:' + i;
  }
  var btn = ul.getElementsByTagName('button');
  for (var i = 0; i < btn.length; i++) {
    btn[i].className += ' pull-right btn btn-xs btn-checklist: ' + list;
  }
}

function delParagrafo(id){
  var node = document.getElementById("div"+id);
  if (node.parentNode) {
    node.parentNode.removeChild(node);
  }
}
<ul id="lista-paragrafos">
</ul>
<div class="panel-body">
  <textarea rows="3" id="paragrafo" name="checklist" class="form-control "></textarea>
  <br>
  <button type="button" class="btn-xs btn btn-default pull-right" title="Adicionar este parágrafo" onclick="addParagrafo()"><i class="fa fa-plus">Adcionar</i>
  </button>
  <span class="help-block">Digite ou altere o objeto referente aos documentos da sua inspeção.</span>
    
22.07.2015 / 21:30
1

Since the buttons you are joining have a class btn-remover you could use this to know which parent element of this content (which is the one with the panel-body class) and delete it.

You could do an event delegate, and a function that fetches this parent element like this: 

function closest(el, cssClass) {
    while (el = el.parentNode){
        if (el.classList.contains(cssClass)) return el;
    }
    return false;
}
document.getElementById('lista-paragrafos').addEventListener('click', function (e) {
    if (e.target.classList.contains('btn-remover')){
        var panelBody = closest(e.target, 'panel-body');
        panelBody.parentNode.removeChild(panelBody);
    }
});

jsFiddle: link

    
22.07.2015 / 23:23
Dropdown with JQuery / Ajax only sends data in first record How to apply the style only in modal (Bootstrap)