problem with removing dynamically added elements from table..

Question

Hi

I'm trying to add and remove some rows from a table using Jquery. But I dont know how to remove the newly added rows. If I have a remove link it will work, but thats not what I want. I want to be able to call a js function that shall remove all items.

I have tried iterate over the items, but the count for the tr's in the table are always 0.

    <script src="scripts/jquery-1.3.2.min.js"></script>    
<script language=javascript>
    function UpdateData() {
        var dataStructure = new Object();
        dataStructure.Start = "Added Start";
        $("#table tbody tr:first").remove();        
        InsertDataInToTable(dataStructure);        
    }

    function InsertDataInToTable(dataStructure) {
        var newRow = $("#table thead tr:first").clone();        
        newRow.find("td").eq(0).text(dataStructure.Start);
        newRow.insertAfter("#table tbody");
    }

Start Inital start

Answer 1

I recommend trying to add the DOM elements manually and assign a class using addClass. Then you know which ones were added and which ones you want to remove.

Then doing $(".className").remove(); might be cleaner.

You could have them defaulted as a class 'standard' and using addClass('new') and remove the $('.new').remove();

Or you can just assign them all the .ClassName and remove all of that class name when you're ready.

I don't recommend using the prior recommendation of adding a fake attribute in the DOM like "newLine" because it's not valid XHTML. If you use .addClass() you can easily manage things in a validated way.

Hope this helps!