Repeat row when clicked on ADD button

Question

I want to have my news section repeats when i click on add button using jQuery and javascript. it repeats but repeats twice. but i want to repeat it only once, also remove button is not working i mean when i click on remove button there is no action. need help here is my code,

HTML

<table align="center" cellpadding="0" cellspacing="0" border="0" width="600" class="test" >
     <tr>
      <td>
       <form id="formtwo" name="formone" method="post" enctype="multipart/form-data">
         <table width="100%">
           <tbody>
             <tr>
               <td><h3>News</h3></td><td><input type="text" readonly="readonly" value="1" name="newsid" id="newsletter"  /></td>
             </tr>

             <tr>
               <td>Title of news:</td>
               <td><input type="text"  name="newstitle"  /><br /><br /></td>
             </tr>

             <tr>
              <td>Description:</td>
              <td><textarea rows="5" cols="30" name="description" ></textarea><br /><br />              </td>
             </tr>

             <tr>
              <td>Title of Link:</td>
              <td><input type="text" name="titleoflink"  /><br /><br /></td>
             </tr>

             <tr>
              <td>URL of News:</td>
              <td><a href="#"><input type="text" name="urlofnews"  /><br /><br /></a></td>
             </tr>

             <tr>
              <td>News image:</td>
              <td><input type="file" name="fileToUpload" id="fileToUpload" ><br /><br />   </td>
             </tr>

             <tr>
              <td></td>
              <td align="right"><input class="add" type="button" value="Add" /><input  class="remove" type="button" value="remove" /></td>
             </tr>
           </tbody>
         </table>
       </form>
      </td>
     </tr>
  </table>

JS

$(document).ready(function(){
 $('.add').click(function() {
       $(".test").append('<table width="600" align="center"><tbody><tr><td><h3>News</h3></td><td><input type="text" readonly="readonly" value="1" name="newsid" id="newsletter"  /></td></tr><tr><td>Title of news:</td><td><input type="text"  name="newstitle"  /><br /><br /></td></tr><tr><td>Description:</td><td><textarea rows="5" cols="30" name="description" ></textarea><br /><br /></td></tr><tr><td>Title of Link:</td><td><input type="text" name="titleoflink"  /><br /><br /></td></tr><tr><td>URL of News:</td><td><a href="#"><input type="text" name="urlofnews"  /><br /><br /></a></td></tr><tr><td>News image:</td><td><input type="file" name="fileToUpload" id="fileToUpload" ><br /><br /></td></tr><tr><td></td><td align="right"><input class="add" type="button" value="Add" /><input class="remove" type="button" value="remove" /></td></tr></tbody></table>');
  });
  });
    $('.remove').click(function() {
    if($(".test tr").length != 2)
     {
        $(".test tr:last-child").remove();
     }
  else
     {
        alert("You cannot delete first row");
     }
});

egvrcn · Answer 1 · 2015-09-15T05:44:07.307

When add to new, you should call remove and add action again. Create a remove function then call remove function like this:

  $(document).ready(function(){
    removeAdd();
  });

function removeAdd(){
     $('.add').click(function() {
       $(".test").append('<table width="600" align="center"><tbody><tr><td><h3>News</h3></td><td><input type="text" readonly="readonly" value="1" name="newsid" id="newsletter"  /></td></tr><tr><td>Title of news:</td><td><input type="text"  name="newstitle"  /><br /><br /></td></tr><tr><td>Description:</td><td><textarea rows="5" cols="30" name="description" ></textarea><br /><br /></td></tr><tr><td>Title of Link:</td><td><input type="text" name="titleoflink"  /><br /><br /></td></tr><tr><td>URL of News:</td><td><a href="#"><input type="text" name="urlofnews"  /><br /><br /></a></td></tr><tr><td>News image:</td><td><input type="file" name="fileToUpload" id="fileToUpload" ><br /><br /></td></tr><tr><td></td><td align="right"><input class="add" type="button" value="Add" /><input class="remove" type="button" value="remove" /></td></tr></tbody></table>');
            removeAdd();
  });


    $('.remove').click(function() {
    if($(".test tr").length != 2)
     {
        $(".test tr:last-child").remove();
     }
  else
     {
        alert("You cannot delete first row");
     }
            removeAdd();
});}

JsFiddle

Hey brother, its working but now when i click on add button second time its not working. — chintan suthar, Sep 15 '15 at 05:33

score 1 · Answer 2 · answered Sep 15 '15 at 05:36

When you add new elements to a document, you must re-initialize the event handlers. You must rebind to these events and not double bind current events. Your current code structure poses a problem which can be solved with some tweaking, here is a JSFiddle of your code that "works" in the manner that I would believe you intended for.

https://jsfiddle.net/zeLbswtL/

var tableString = "...";
function setupHandlers() {
  $('.add').unbind();
  $('.remove').unbind();
  $('.add').click(function() {
      $(".test").last().after(tableString);
      setupHandlers();
  }
  $('.remove').click(function() {
      if($(".test").length > 1)
      {
          $(this).closest('table').remove();
      }
      else
      {
          alert("You cannot delete first row");
      }
 });
}
$(document).ready(function(){
    setupHandlers();
});

You will still run into issues with your form id and sticking forms in a form, you might need to restructure certain things. Well feel free to ask additional questions.

it works fine but when i enter data into it the new section add above the inserted section and i want the new section below the inserted section. — chintan suthar, Sep 15 '15 at 06:44

Repeat row when clicked on ADD button

2 Answers2

Linked