double click on any cell will be removed

Question

I want to add this function inside the nested loop inside the function function :

$("td").dblclick(function(){
             $(this).html(text(" "));
         });

loop :

for(var i = 0; i <nr ;i++)
   {
       table_body += '<tr>';
        for(var j = 0; j < nc; j++)
        {
                table_body += '<td class = "cell" ondrop="drop(event)" ondragover="allowDrop(event)">';
                table_body += '&nbsp&nbsp&nbsp';
                table_body += '</td>';
        }
        table_body += '</tr>';
   }

the reason : when i double click on any cell in the table the content will be removed

Answer 1

It would be much easier to use event delegation. Attach the listener to the table so it can capture events as they "bubble" up the DOM from the cells.

$('table').on('dblclick', 'td', handleClick);

function handleClick() {
  $(this).text('');
}

table { border-collapse: collapse; border: 1px solid #565656; }
td { border: 1px solid #ababab; padding: 0.2em; }
td:hover { cursor: pointer; background-color: #ffff00; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr><td>Bob from accounting</td><td>45</td></tr>
    <tr><td>Stacey</td><td>92</td></tr>
    <tr><td>Steve</td><td>19</td></tr>
  </tbody>
</table>