Remove Only One Item from a javascript list

Question

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>

However I need to click on "Remove" and it excludes the object itself, I’m having difficulties to solve this, so I would like a light because I started 'programming' a little while ago and I did not find anything really explanatory in javascript, only in jquery.

Answer 1

You can use this function:

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

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

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

And finally reference this div in the onclick from 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>

Answer 2

Since the buttons you’re putting together have a class btn-remover you could use that to know which parent element of that content (which is the one that has the class panel-body) and erase it.

You could make an event manager, and a function that will fetch that 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: http://jsfiddle.net/njortae9/