CODEWITHSUNDEEP
javascriptjquery
irfan
irfan

Reputation: 39

Deleting Row at Same Position in different tables using jquery

I made a script to remove a row from one table (tbUser). I need a script to remove the same row from the first table to the second table, in the same position (tbUser and tbUsers). How can I do this?

    $(document).ready(function(){
        
        $("#tbUser").on('click','.btnDelete',function(){      
            $(this).closest('tr').remove();
    	});
    
    	$("#tbUser").on('click','.btnAdd',function(){               
            $("#tbUser").append("<tr><td><input type='text' name='first' id='first'></td><td><button class='btnAdd'>Add</button></td><td><button class='btnDelete'>Delete</button></td></tr>");
            $("#tbUsers").append("<tr><td><input type='text' name='first' id='first'></td> </tr>");    
    	});
        
    }); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbUser">
    <tr>
	<td><button class="btnDelete">Delete</button></td>
	<td><button class="btnAdd">Add</button></td>    
    </tr>    
</table> 

<h2>table 2</h2>
<table id="tbUsers">   
</table>

Upvotes: 0

Views: 89

Answers (1)

Pavan Andhukuri
Pavan Andhukuri

Reputation: 1617

        $(document).ready(function() {
        
          $("#tbUser").on('click', '.btnDelete', function() {
        
            var idx = $(this).closest('tr').index();
            $("#tbUser").find("tr").eq(idx).remove();
            $("#tbUsers").find("tr").eq(idx - 1).remove(); // Because you have a tr as your table header in your first table
          });
        
          $("#tbUser").on('click', '.btnAdd', function() {
        
            $("#tbUser").append("<tr><td><input type='text' name='first' id='first'></td><td><button class='btnAdd'>Add</button></td><td><button class='btnDelete'>Delete</button></td></tr>");
            $("#tbUsers").append("<tr><td><input type='text' name='first' id='first'></td> </tr>");    
          });    
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbUser">
    <tr>
	<td><button class="btnDelete">Delete</button></td>
	<td><button class="btnAdd">Add</button></td>    
    </tr>    
</table> 

<h2>table 2</h2>
<table id="tbUsers">   
</table>

Upvotes: 1

Related Questions