Delete one row in html table marqued by a check box with javascript

Question

Hi everyone,

I build dynamically my HTML table from database like that:

for (i = 0; i < nomCols.length; i++) {
    retour.append(("<td bgcolor=#0066CC>") + nomCols[i] + "</td>");

}
retour.append("</tr>");

retour.append("<tr>");

try {

    s = HibernateUtil.currentSession();
    tx = s.beginTransaction();
    Query query = s.createQuery(HQL_QUERY);

    for (Iterator it = query.iterate(); it.hasNext();) {
        if (it.hasNext()) {
            Dailytimesheet object = (Dailytimesheet) it.next();
            retour.append("<td><input type=checkbox  name=cb id=cb  /> </td>");
            retour.append("<td>" + object.getTrackingDate() + "</td>");
            retour.append("<td>" + object.getActivity() + "</td>");
            retour.append("<td>" + object.getProjectCode() + "</td>");
            retour.append("<td>" + object.getWAName() + "</td>");
            retour.append("<td>" + object.getTaskCode() + "</td>");
            retour.append("<td>" + object.getTimeSpent() + "</td>");
            retour.append("<td>" + object.getPercentTaskComplete() + "</td>");
        }
        retour.append("</tr>");


    }

    retour.append("</table>");
    tx.commit();


} catch (HibernateException e) {
    retour.append("</table><H1>ERREUR:</H1>" + e.getMessage());
    e.printStackTrace();
}

return retour;
}

so I want that all check boxes having the same id. When trying to delete one row in my table witch have the check box checked i found a problem with that. Iam using simple javascript like this:

function DeleteARow() {
    //var Rows = document.getElementById('sheet').getElementsByTagName('tr');
    //var RowsCount = Rows.length;
    //alert('Your table has ' + RowsCount + ' rows.');
    if (document.getElementById('cb').checked == true) {

        document.getElementById('cb').parentNode('td').parentNode('tr').remove();

    }
}

It doesn't work approperly and only the first row have the id 'cb'.

Many thanks for your help.

Answer 1

The point of ID is that there can be only one. You cannot have multiple elements that have the same ID.

getElementByID will only return the first element that has the ID.

I recommend you instead use CSS classes.

Here is a way you can loop through checkboxes who have class="cb":

var j, elements = document.getElementsByTagName("INPUT");
for (j = 0;j < elements.length;j += 1) {
    if (elements[j].className === 'cb' && elements[j].checked === true) {
        // elements[j] is your checkbox
    }
}

If you want to take the time to learn something like jQuery, you can make this entire task easier:

$('.cb:checked').parent().parent().remove();

edit:

$('.cb:checked').closest('tr').remove();