CODEWITHSUNDEEP
javascripthtml
Bhaskar
Bhaskar

Reputation: 337

Deletion of Nodes using JavaScript

I am trying to delete a row on clicking of a button. It works fine unless I am within a table. My JSP has a combination of 50 rows in a table and after that we nest the the tables. Now, my problem is if I want to delete the last row from the previous table, how should I do that?

I am attaching the screenshot of the UI and Debugger HTML View too. Any suggestions will be helpful.

[DROW] here are the different rows under which we have a tree structure. We need to climb up to each row first and then move down to the lastChild to delete the last row.

This is only possible here if my previousRow contains the last rows val. I am unable to get down to it. 

function removeAnotherResponse(arg0, data, response, request){

// Make sure the response has everything we need
if(arguments==null || arguments.length<4  || !request.content || request.content==null || !request.content.groupUniqueId || request.content.groupUniqueId==null){
    return;
}

// Check for true response
if(!data || data==null || !data[0] || !data[0].removedSuccess || data[0].removedSuccess!=true){
    return;
}

var groupUniqueId=request.content.groupUniqueId;

// Get the add another button row and add the new row before it.
var addAnotherRow=document.getElementById("ADD_"+groupUniqueId);
if(addAnotherRow==null) return;

    var previousRow=document.getElementById("ADD_"+groupUniqueId).previousSibling;  
    addAnotherRow.parentNode.removeChild(previousRow);



showOrHideAddRemoveButtons(groupUniqueId, data[0].removeButton, data[0].addButton);
updateSectionCount(groupUniqueId, false);
getPortCount(groupUniqueId);

}

Upvotes: 1

Views: 79

Answers (2)

Bhaskar
Bhaskar

Reputation: 337

Thanks everyone for suggesting me to correct the html code.

UI element was indeed creating a problem for me in other ways. Now, instead of creating a new, I have found out other way to handle this and my HTML code has got simpler. PFB the script changes which have been made. Thanks for all the suggestions :)

if (document.getElementById("ID" + gID) != null) {

    innerElement = document.getElementById("ID_TD_" + gID);
    innerElement.innerHTML = innerElement.innerHTML + responseHTML;

} else {

    innerElement = document.createElement("td");
    innerElement.setAttribute("id", "ID_TD_" + gID);

    newElement.appendChild(innerElement);
    innerElement.innerHTML = responseHTML;

}

Upvotes: 0

Oleg
Oleg

Reputation: 221997

The HTML fragment which you post seems have some problems (id duplicates, usage <tr> as parent of other <tr>). I try still answer on your main question how to remove row of the table. You can use deleteRow method of DOM table object. The rows collection can be used to access to existing rows and deleteRow and insertRow allows you to modify the table.

Upvotes: 2

Related Questions