javascript - Delete Dynamic Row entry -
i have following html view , javascript :
var rowcount = 1; $(".add_more_rows").click(function() { rowcount++; var recrow = '<p id="rowcount' + rowcount + '"><tr><td><input name="" type="text" size="17%" maxlength="120" /></td>\n\ <td><input name="" type="text" maxlength="120" style="margin: 4px 5px 0 5px;"/></td>\n\ <td><input name="" type="text" maxlength="120" style="margin: 4px 10px 0 0px;"/></td>\n\ <td> <span id="remove_row' + rowcount + '" class="remove_row' + rowcount + '" style="font:normal 12px agency, arial; color:blue; text-decoration:underline; cursor:pointer;">delete entry</span> </td></tr> </p>'; $('.remove_row' + rowcount + '').click(function() { $('#rowcount' + rowcount).remove(); }); $('#addedrows').append(recrow); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div> <table rules="all" style="background:#fff;"> <tr> <td style="font-size:14px;">name</td> <td style="font-size:14px;">email</td> <td style="font-size:14px;">mobile</td> <td><span class="add_more_rows" id="add_more_rows" style="font:normal 12px agency, arial; color:blue; text-decoration:underline; cursor:pointer;"> add more </span> </td> </tr> <tr id="rowid"> <td> <input name="" type="text" value="" size="17%" /> </td> <td> <input name="" type="text" value="" /> </td> <td> <input name="" type="text" value="" /> </td> </table> <div id="addedrows"></div> </td> </tr> </div>
when click on add more button, new row should added table works , each row assigned unique id , class when try click on delete entry delete specific row, fails. please advise not doing right on remove_row prevents trigger take place , row not deleted.
select parent element , remove same dom. have added below function javascript , additoinally added onclick="javascript:fnremove(this);"
span
function fnremove(t){ $(t).parent('p').remove(); }
var rowcount = 1; $(".add_more_rows").click(function() { rowcount++; var recrow = '<p id="rowcount' + rowcount + '"><tr><td><input name="" type="text" size="17%" maxlength="120" /></td>\n\ <td><input name="" type="text" maxlength="120" style="margin: 4px 5px 0 5px;"/></td>\n\ <td><input name="" type="text" maxlength="120" style="margin: 4px 10px 0 0px;"/></td>\n\ <td> <span id="remove_row' + rowcount + '" onclick="javascript:fnremove(this);" class="remove_row' + rowcount + '" style="font:normal 12px agency, arial; color:blue; text-decoration:underline; cursor:pointer;">delete entry</span> </td></tr> </p>'; $('#addedrows').append(recrow); }); function fnremove(t) { $(t).parent('p').remove(); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div> <table rules="all" style="background:#fff;"> <tr> <td style="font-size:14px;">name</td> <td style="font-size:14px;">email</td> <td style="font-size:14px;">mobile</td> <td><span class="add_more_rows" id="add_more_rows" style="font:normal 12px agency, arial; color:blue; text-decoration:underline; cursor:pointer;"> add more </span> </td> </tr> <tr id="rowid"> <td> <input name="" type="text" value="" size="17%" /> </td> <td> <input name="" type="text" value="" /> </td> <td> <input name="" type="text" value="" /> </td> </table> <div id="addedrows"></div> </td> </tr> </div>
Comments
Post a Comment