Delete CSS applied to Object Brothers clicked with Javascript

Question

How could resetar a CSS applied with Javascript via Click element? I have a table whose tr and td are created dynamically and a table table is created directly on HTML static, the td naturally do not possess CSS this CSS is applied when the td is clicked but wish to delete the CSS of the others td brothers of td clicked.

Code of the HTML Table:

<table id="palavras">
<tbody>
   <tr>
      <td>Cadillac</td>
   </tr>
   <tr>
       <td>Cachorro</td>
   </tr>
   <tr>
      <td>Camaro</td>
   </tr>
 </tbody>
 </table>

Javascript code responsible for adding the CSS (fucnionando) and disproportion to the brothers of the clicked element:

$('body').on('click', ' #palavras td', function (e){
    $(this).css('background-color', '#333');
    $(this).siblings().css('background-color', '#fff');
});

Answer 1

You can do it this way.

$('body').on('click', ' #palavras td', function (e){
    $('#palavras td').each(function(){
    $(this).css('background-color', '#fff');
    })

    $(this).css('background-color', '#333');

});