Javascript - Function that changes the background of the parent element

Question

I’m having trouble making a Function. Can help me?
After clicking on the checkbox or on the label, it colors only the word, I would like to color also the background of the div, I tried to make a script like:
var obj = document.getElementById("teste").parent(); obj.style.backgroundColor='#FF0000';
But it didn’t work, you can help me??

    function teste(){
       var obj = document.getElementById("categoria").parent();
         obj.style.backgroundColor='#FF0000'; 
    }

input.check-genero:hover + label,
input.check-genero:checked + label{
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

/* Tabela conteúdo */
table.tabela-categoria{
    border: solid 15px #fff;
}

.tabela-categoria td{
    border: solid 2px #d3d1d1;
    text-align: center;
    padding: 5px;
    width: 140px;
}

.categoria + label{
    font-family: verdana;
    font-size: 1.2em;
    color: #727176;
    cursor: pointer;
}

.categoria:hover + label,
.categoria:checked + label{
    color: #ffffff;
    background-color:#FF6600;
}

<table class="tabela-categoria">
    <tr>
        <td class="tabela-categoria">
            <input type="checkbox" name="cont1" id="animais" class="categoria">
            <label for="animais" onclick="teste()">ANIMAIS</label>
        </td>
        <td>
            <input type="checkbox" name="cont2" id="artes" class="categoria">
            <label for="artes">ARTES</label>
        </td>
        <td>
            <input type="checkbox" name="cont3" id="beleza" class="categoria">
            <label for="beleza">BELEZA</label>
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="cont4" id="business" class="categoria">
            <label for="business">BUSINESS</label>
        </td>
        <td>
            <input type="checkbox" name="cont5" id="causas" class="categoria">
            <label for="causas">CAUSAS</label>
        </td>
        <td>
            <input type="checkbox" name="cont6" id="comedia" class="categoria">
            <label for="comedia">COMEDIA</label>
        </td>
    </tr>
</table>

Answer 1

Pass the event to that function and then do e.target.closest('td') to find the td.

Example:

function teste(e) {
  var el = e.target.closest('td');
  el.style.backgroundColor = '#FF0000';
}

input.check-genero:hover+label,
input.check-genero:checked+label {
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}


/* Tabela conteúdo */

table.tabela-categoria {
  border: solid 15px #fff;
}

.tabela-categoria td {
  border: solid 2px #d3d1d1;
  text-align: center;
  padding: 5px;
  width: 140px;
}

.categoria+label {
  font-family: verdana;
  font-size: 1.2em;
  color: #727176;
  cursor: pointer;
}

.categoria:hover+label,
.categoria:checked+label {
  color: #ffffff;
  background-color: #FF6600;
}

<table class="tabela-categoria" onclick="teste(event)">
  <tr>
    <td class="tabela-categoria">
      <input type="checkbox" name="cont1" id="animais" class="categoria">
      <label for="animais" >ANIMAIS</label>
    </td>
    <td>
      <input type="checkbox" name="cont2" id="artes" class="categoria">
      <label for="artes">ARTES</label>
    </td>
    <td>
      <input type="checkbox" name="cont3" id="beleza" class="categoria">
      <label for="beleza">BELEZA</label>
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="cont4" id="business" class="categoria">
      <label for="business">BUSINESS</label>
    </td>
    <td>
      <input type="checkbox" name="cont5" id="causas" class="categoria">
      <label for="causas">CAUSAS</label>
    </td>
    <td>
      <input type="checkbox" name="cont6" id="comedia" class="categoria">
      <label for="comedia">COMEDIA</label>
    </td>
  </tr>
</table>

Answer 2

With Document.getElementById("category") you are looking for an element with id category but it does not exist in your html, you need to search for an element with the category class. For this you can use querySelector because it searches for classes in html, as well as ids. See in the code below, tested and worked.

function teste(){
  var obj = document.querySelector(".categoria").parentNode;
  obj.style.backgroundColor='#FF0000'; 
}

The . Parent() method also does not work because it is jQuery, with pure JS use parentNode.