cómo agregar eliminar y agregar el button con líneas usando jquery?

Quiero agregar eliminar y agregar botones con los campos en fila hover como este .

pero mis campos dynamics generan al button click qué cambios puedo hacer para el layout del enlace anterior? aquí está mi código:

 <tr> <td colspan=7 width=800><div id="input1" style="margin-bottom:4px;" class="clonedInput"><select class="items" name="items" style="width:127px; float:left;" id="items"><option value="1" selected="selected" disabled="disabled"></option></select> <textarea name="description" id="description" class="description" style="float:left; display: block; height: 30px; width:209px; border-radius:0px; margin: -1px 1px 0;"></textarea> <input type="text" name="unitprice" id="unitprice" class="unitprice" style="float:left; display: block; height: 30px; width:106px; border-radius:0px; margin: -1px -1px 0;"> <input type="text" name="quantity" id="quantity" class="quantity" style="float:left; display: block; height: 30px; width:64px; border-radius:0px; margin: -1px 1px 0;"> <select name="firsttax" id="firsttax" style=" float:left; display: block; height: 31px; width:106px; border-radius:0px; margin: -2px -1px 0;"><option value="1" selected="selected" ></option></select> <select name="secondtax" id="secondtax" style="float:left; display: block; height: 31px; width:107px; border-radius:0px; margin: -2px 0px 0;"><option value="1" selected="selected"></option></select> <input type="text" name="linetotal" id="linetotal" class="linetotal" placeholder="0.00" readonly style="float:right; display: block; height: 31px; width:107px; border-radius:0px; background-color: #F0F0F0; text-align:right; margin: -31px -1px 0;"> </div> </td></tr> 

y aquí está mi código de javascript para generar campos dinámicamente:

  $('#btnDel').attr('disabled','disabled'); $('#btnAdd').click(function () { var num = $('.clonedInput').length; var newNum = num + 1; var newElem = $('#input' + num).clone().attr('id', 'input' + newNum); newElem.find(':input').each(function () { $('form select[name=items]').attr('name', 'items'+newNum); $('form select[id=items]').attr('id', 'items'+newNum); $('form textarea[name=description]').attr('name', 'description'+newNum); $('form textarea[id=description]').attr('id', 'description'+newNum); $('form input[name=unitprice]').attr('name', 'unitprice'+newNum); $('form input[id=unitprice]').attr('id', 'unitprice'+newNum); $('form input[name=quantity]').attr('name', 'quantity'+newNum); $('form input[id=quantity]').attr('id', 'quantity'+newNum); $('form select[name=firsttax]').attr('name', 'firsttax'+newNum); $('form select[id=firsttax]').attr('id', 'firsttax'+newNum); $('form select[name=secondtax]').attr('name', 'secondtax'+newNum); $('form select[id=secondtax]').attr('id', 'secondtax'+newNum); $('form input[name=linetotal]').attr('name', 'linetotal'+newNum); $('form input[id=linetotal]').attr('id', 'linetotal'+newNum); $('#itemscounter').val(+newNum); }); $('#input' + num).after(newElem); $('#btnDel').attr('disabled', false); //if (newNum == 5) $('#btnAdd').attr('disabled', 'disabled'); }); $('#btnDel').click(function() { var num = $('.clonedInput').length; $('#input' + num).remove(); $('#btnAdd').attr('disabled',false); if (num-1 === 1) $('#btnDel').attr('disabled','disabled'); }); $('#btnDel').attr('disabled','disabled'); 

y aquí están mis botones:

 <input type="button" class="btn btn-success" id="btnAdd" value="Add Row" /> <input type="button" class="btn btn-danger" id="btnDel" value="Remove Row" /> 

Qué tal algo como esto:

 jQuery(document).on("ready", function() { initAddRows(); }); function initAddRows() { var template = jQuery("#template"), dataRows = jQuery("#dataRows"); jQuery("#btnAdd").on("click", function() { var newRow = template.clone(true, true), fieldRows = dataRows.find(".fieldRow"); newRow.attr('id', 'row' + (fieldRows.length + 1)).find('[id]').each(function() { jQuery(this).attr("id", jQuery(this).attr("id") + (fieldRows.length + 1)); }); fieldRows.filter(":last").after(newRow); }); dataRows.on("click", ".remove", function() { jQuery(this).parent().remove(); }); } 
  .fieldRow { margin-bottom: 20px; overflow: hidden; } .fieldRow .field { float: left; margin: 0 10px 0 0; } .fieldRow select.field { padding: 1px; } .buttonHolder { border-top: solid 5px #ccc; padding: 10px; } #template .button.remove { display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="dataRows"> <div class="fieldRow" id="template"> <select class="items field" name="items" id="items" disabled="disabled"> <option value="1" selected="selected">Value</option> <option value="1"></option> <option value="1"></option> </select> <textarea name="description" id="description" class="description field"></textarea> <input type="text" name="unitprice" id="unitprice" class="unitprice field"> <input type="text" name="quantity" id="quantity" class="quantity field"> <select name="firsttax" id="firsttax" class="field"> <option value="1" selected="selected">Value</option> </select> <select name="secondtax" id="secondtax" class="field"> <option value="1" selected="selected">Value</option> </select> <input type="text" name="linetotal" id="linetotal" class="linetotal field" placeholder="0.00" readonly> <input type="button" class="button remove" id="btnDel" value="Remove Row" /> </div> </div> <div class="buttonHolder"> <input type="button" class="button add" id="btnAdd" value="Add Row" /> </div> 

Bueno, el problema es genial. 🙂 Aquí está la solución.

Marcado HTML

 <div class="formContainer"> <div class="row"> <div class="flt"> <select name="items" id="items"> <option value="1">1</option> </select> </div> <div class="flt"><textarea name="description" id="description"></textarea></div> <div class="flt"><input type="text" name="unitprice" id="unitprice" /></div> <div class="flt"><input type="text" name="quantity" id="quantity" /></div> <div class="flt"> <select name="firsttax" id="firsttax"> <option value="1">1</option> </select> </div> <div class="flt"> <select name="secondtax" id="secondtax"> <option value="1">1</option> </select> </div> <div class="flt"><input type="text" name="linetotal" id="linetotal" readonly /></div> <div class="flt"><input type="button" class="addRow" name="addRow" value="+" /></div> <div class="flt"><input type="button" class="removeRow" name="removeRow" value="-" /></div> <div class="clr"></div> </div> </div> 

CSS

 .fieldRow { margin-bottom: 20px; overflow: hidden; } .fieldRow .field { float: left; margin: 0 10px 0 0; } .fieldRow select.field { padding: 1px; } .buttonHolder { border-top: solid 5px #ccc; padding: 10px; } #template .button.remove { display: none; } 

Y JavaScript:

 $(function(){ var rowItem = $(".row"); $(".formContainer").on("click", ".addRow", function(){ var newItem = rowItem.clone(), rowIndex = $(".row").length; $(":input", newItem).each(function(c, obj){ $(obj).attr("id", $(obj).attr("name") + rowIndex); }); //$(this).parent().parent().after(newItem); // adds just after the current line $(".formContainer").append(newItem); // adds At the end of the container }) .on("click", ".removeRow", function(){ if($(".row").length > 1){ $(this).parents(".row").remove(); } }); }); 

Tienes dos forms de agregar la fila:

  1. Si quieres agregar justo después de la fila actual
  2. Si desea agregar la fila al final del formulario

Ambos están en el JS anterior, (se comenta uno a partir de ahora)

Aquí está la demo de trabajo: http://jsfiddle.net/ashishanexpert/8pJ4P/1/

Si te gustan las animaciones, puedes echarle un vistazo a esta: http://jsfiddle.net/ashishanexpert/8pJ4P/4/