CODEWITHSUNDEEP
html
user12453817
user12453817

Reputation:

How to delete table data in HTML?

I want to delete the datas I put in the cells of a table. I just want to delete the data nothing else, how can I do that in HTML? This is my table and I want to delete the datas in the table:

<table style="width:100%" style="height:10%" id="table1">
<tr id="vmi">
<td class="cella" id="tr0td1"></td>
<td class="cella" id="tr0td2"></td>
<td class="cella" id="tr0td3"></td>
<td class="cella" id="tr0td4"></td>
<td class="cella" id="tr0td5"></td>
</tr>
<tr>
<td class="cella" id="tr1td1"></td>
<td class="cella" id="tr1td2"></td>
<td class="cella" id="tr1td3"></td>
<td class="cella" id="tr1td4"></td>
<td class="cella" id="tr1td5"></td>
</tr>
<tr>
<td class="cella" id="tr2td1"></td>
<td class="cella" id="tr2td2"></td>
<td class="cella" id="tr2td3"></td>
<td class="cella" id="tr2td4"></td>
<td class="cella" id="tr2td5"></td>
</tr>
<tr>
<td class="cella" id="tr3td1"></td>
<td class="cella" id="tr3td2"></td>
<td class="cella" id="tr3td3"></td>
<td class="cella" id="tr3td4"></td>
<td class="cella" id="tr3td5"></td>
</tr>
<tr>
<td class="cella" id="tr4td1"></td>
<td class="cella" id="tr4td2"></td>
<td class="cella" id="tr4td3"></td>
<td class="cella" id="tr4td4"></td>
<td class="cella" id="tr4td5"></td>
</tr>
</table>

Upvotes: 0

Views: 45

Answers (1)

Carsten Massmann
Carsten Massmann

Reputation: 28226

You can use some JavaScript code like

[...document.querySelectorAll("#table1 td")].forEach(td=>td.innerHTML="")

This would delete all contents from all cells in the table.

If you place a button like this on your page

<button id="clrall">clear all cells</button>

Then you can assign the action to this button with

document.querySelector("#clrall").addEventListener("click",ev=>
[...document.querySelectorAll("#table1 td")].forEach(td=>td.innerHTML=""))

If, on the other hand, you want to delete the content from individual cells, like the one you click on, then you could do it by binding an appropriate click event handler to the cells of the table.

document.querySelector("#table1")
.addEventListener("click",function(ev){
  if (ev.target.tagName=="TD") ev.target.innerHTML=""; 
})

Upvotes: 3

Related Questions