Agregar y Eliminar Lineas con jquery

by Carlos Quintero

HTML

<div id="lista">
  <div class="muestra" id="1">
    <span class="titulo">Titulo de Campo: <span class="numero">1</span></span><br>
    <input type="text" name="datos" placeholder="Datos"/>
    <button data-id="1" onClick="agrega()" class="add">
      Agregar
    </button>
    <button onClick="elimina(1)" data-id="1" class="del">
      Eliminar
    </button>
    <hr>
  </div>

</div>

JavaScript

var contador = 1;
$(function(){
	
})

function agrega(){
    contador = parseInt(contador) + 1;
      var item = `<div class="muestra" id="`+contador+`">
                  <span class="titulo">Titulo de Campo: <span class="numero">`+contador+`</span></span><br>
                  <input type="text" name="datos" placeholder="Datos"/>
                  <button data-id="`+contador+`" onClick="agrega()" class="add">
                    Agregar
                  </button>
                  <button onClick="elimina(`+contador+`)" data-id="`+contador+`" class="del">
                    Eliminar
                  </button>
                  <hr>
                </div>`;
        $("#lista").append(item);
}

function elimina(x){
	$("div[id="+x+"]").remove();
  contador = 0;
  $("#lista .muestra").each(function(){
  	contador = parseInt(contador) + 1;
    $(this).attr('id',contador)
    $(this).find('span.numero').html(contador)
    $(this).find('button.add').attr('data-id',contador)
    $(this).find('button.del').attr('data-id',contador)
    $(this).find('button.del').attr('onClick','elimina('+contador+')')
  })
}