Onclick td remove innerHTML

Can anyone show me how to write script that will remove a string of text from a td when it is clicked, leaving it a blank cell?

Have you attempted to write the code yourself? If you have can you post it?

“Give a man a fish; you have fed him for today. Teach a man to fish; and you have fed him for a lifetime”

Hi Rayday,

Welcome to Sitepoint Forums!

I don’t know how your HTML is and what is in the TD so far but onclick of any elements will help you to do that like:


<table>
    <tr>
        <td onclick="this.innerHTML='&nbsp;';">hello world!</td>
    </tr>
</table>

Hope this will help to go ahead. Good luck!

onclick=“this.innerHTML=’ '” is exactly what i needed. I obviously don’t know js and was over thinking it. Thank you.

Or you may want to try this:


var x = document.getElementsByTagName('td');
for (var i=0;i<x.length;i++) {
	x[i].onclick = function(){ this.innerHTML = ''; }
}

What it does is retrieving all the elements “td” and sets it to a variable, then traverse on each element to add the onclick event which will clear the td element

Instead of having hundreds or thousands of onclick events for the web page to manage, it can be more efficient to use a single event manager that filters out the unwanted ones before passing it through to your event function.

Here is a pretty generic example where you pass condition and action functions, so that you can specify which events to take action on.


function processEvent(condition, action) {
    return function (evt) {
        evt = evt || window.event;
        var targ = evt.target || evt.srcElement;
        if (condition(targ)) {
            action(targ);
        }
    }
}
document.body.onclick = processEvent(
    function condition (targ) {
        return (targ.nodeType === 1 && targ.nodeName === 'TD');
    },
    function action (targ) {
        targ.innerHTML = '';
    }
);

The names condition and action on the functions don’t have to be there, but are useful reminder as to their purpose.

The above script will check all clicks that occur, and if they occur on a TD element it will empty that element for you.