title: JS Jquery How to select a mouse click Target > parent > .Class
body: <p>I currently have a table set up where each cell in the body looks like</p>
  <pre><code> `&lt;td&gt;&lt;div class=&quot;container&quot;&gt; &lt;div class=&quot;null&quot;&gt;&lt;p&gt;?&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;question&quot;&gt;&lt;p&gt;${response[j].clues[i].question} &lt;/p&gt;&lt;/div&gt;
  </code></pre>
  <p>I am needing to make just the div.null visible, and when clicked it should be hidden revealing div.question. And so I have a mouse event set up that when the user clicks on a td that contains class null it sets visibility to hidden. However I also need to set the div.question to  visible but I can seem to figure out a way to target div.question. Does a way exist similar to what I was trying with...</p>
  <pre><code>$(e.target.parentNode.question).css(&quot;visibility&quot;, &quot;visible&quot;)
  </code></pre>
  <p>In the code snippet im working in the handleClick(e) function</p>
  <p>Here is my code :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// categories is the main data structure for the app; it looks like this:
  
  //  [
  //    { title: "Math",
  //      clues: [
  //        {question: "2+2", answer: 4, showing: null},
  //        {question: "1+1", answer: 2, showing: null}
  //        ...
  //      ],
  //    },
  //    { title: "Literature",
  //      clues: [
  //        {question: "Hamlet Author", answer: "Shakespeare", showing: null},
  //        {question: "Bell Jar Author", answer: "Plath", showing: null},
  //        ...
  //      ],
  //    },
  //    ...
  //  ]
  
  
  fillTable();
  handleClick();
  /** Get NUM_CATEGORIES random category from API.
   *
   * Returns array of category ids
   */
  var NUM_CATEGORIES = [];
  async function getCategoryId() {
    //ADD if cat ID exists in array than run axios get again to randomize
    let response = await axios.get('http://jservice.io/api/random?count=6');
  
    NUM_CATEGORIES.push(response.data.map(result =&gt; ({
      id: result.category.id,
    })))
    //console.log(NUM_CATEGORIES);//returns an array length 6 of id's
    return NUM_CATEGORIES;
  }
  
  /** Return object with data about a category:
   *
   *  Returns { title: "Math", clues: clue-array }
   *
   * Where clue-array is:
   *   [
   *      {question: "Hamlet Author", answer: "Shakespeare", showing: null},
   *      {question: "Bell Jar Author", answer: "Plath", showing: null},
   *      ...
   *   ]
   */
  
  
  async function getCategory(catId) {
  
    var catData = [];
    catId = [];
  
    await getCategoryId(); //returns an array of category id's
  
    Object.values(NUM_CATEGORIES).forEach(val =&gt; {
      val.forEach(id =&gt; {
        catId.push(Object.values(id))
      });
    });
  
    for (let i = 0; i &lt; 6; i++) {
      let result = await axios.get(`http://jservice.io/api/category?id=${catId[i]}`);
      catData.push(result.data);
  
    }
  
    return catData;
  }
  
  /** Fill the HTML table#jeopardy with the categories &amp; cells for questions.
   *
   * - The &lt;thead&gt; should be filled w/a &lt;tr&gt;, and a &lt;td&gt; for each category
   * - The &lt;tbody&gt; should be filled w/NUM_QUESTIONS_PER_CAT (6) &lt;tr&gt;s,
   *   each with a question for each category in a &lt;td&gt;
   *   (initally, just show a "?" where the question/answer would go.)
   */
  
  async function fillTable() {
  
    getCategory().then(response =&gt; {
      var wildCard = 0;
      var $titleData = `&lt;table border="1"&gt; &lt;thead&gt;
              &lt;tr&gt;`;
  
      //generate category titles 
  
      for (let i = 0; i &lt; 6; i++) {
        $titleData += `&lt;td class="header" &gt; ${response[i].title}  &lt;/td&gt;`;
      }
      $titleData += `&lt;/tr&gt; 
              &lt;/thead&gt; 
              &lt;tbody&gt;`;
      var $rowData = '';
  
  
      for (let i = 0; i &lt; response.length; i++) { //generate 5 rows down
  
        $rowData += `&lt;tr&gt;`;
  
        for (let j = 0; j &lt; 6; j++) { //fill 6 cells across
          // if($(rowData).is(':contains($(response[j].clues[i].question)')){//check if duplicate question
          //     wildCard= j
          // }
  
          $rowData += `&lt;td&gt;&lt;div class="container"&gt;
  
                  &lt;div class="null"&gt;&lt;p&gt;?&lt;/p&gt;&lt;/div&gt;
                  &lt;div class="question"&gt;&lt;p&gt; ${response[j].clues[i].question} &lt;/p&gt;&lt;/div&gt;
                  &lt;/div&gt;&lt;/td&gt;`;
        }
        $rowData += `&lt;/tr&gt;`;
  
      }
  
      $titleData += $rowData;
      $titleData += `&lt;/tbody&gt;&lt;/table&gt;`;
  
      console.log(response);
      $('body').append($titleData);
    });
  
  }
  
  /** Handle clicking on a clue: show the question or answer.
   *
   * Uses .showing property on clue to determine what to show:
   * - if currently null, show question &amp; set .showing to "question"
   * - if currently "question", show answer &amp; set .showing to "answer"
   * - if currently "answer", ignore click
   * */
  
  function handleClick(e) {
    $("body").on("click", function(e) {
      if ($(e.target).is(".null")) { //if null show question
        console.log("You clicked on a data cell. Yay!")
        $(e.target).css("visibility", "hidden");
        $(e.target.parentNode.question).css("visibility", "visible")
        //$(".container &gt; .question").css("visibility", "visible");
  
      }
    })
  
  
  }
  
  /** Wipe the current Jeopardy board, show the loading spinner,
   * and update the button used to fetch data.
   */
  
  function showLoadingView() {
  
  }
  
  /** Remove the loading spinner and update the button used to fetch data. */
  
  function hideLoadingView() {}
  
  /** Start game:
   *
   * - get random category Ids
   * - get data for each category
   * - create HTML table
   * */
  
  async function setupAndStart() {}
  
  /** On click of start / restart button, set up game. */
  
  // TODO
  
  /** On page load, add event handler for clicking clues */
  
  // TODO</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* some colors you may find useful:
    #115ff4
    #060ce9
    #28a200
    #8d2ab5
    #74119c
  */
  
  tbody&gt;tr&gt;td {
    padding: 0%;
    background-color: #115ff4;
    z-index: -3;
    ;
  }
  
  .container {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: -2;
  }
  
  .question,
  .null {
    margin: 0;
  }
  
  .question {
    visibility: hidden;
    z-index: 1;
    color: aliceblue;
  }
  
  .null {
    color: aliceblue;
    position: absolute;
    z-index: 2;
    font-size: 200%;
    padding: 1% 8%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;Jeopardy&lt;/title&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Copse&amp;display=swap" rel="stylesheet"&gt;
    &lt;link rel="stylesheet" href="jeopardy.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;script src="https://unpkg.com/jquery"&gt;&lt;/script&gt;
    &lt;script src="https://unpkg.com/axios/dist/axios.js"&gt;&lt;/script&gt;
    &lt;script src="https://unpkg.com/lodash"&gt;&lt;/script&gt;
    &lt;script src="jeopardy.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  `