JSFiddle - React, Tailwind, and code Playground

by jimmzzz

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>closest() Method Example</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
      body {
        padding: 16px;
      }

      .highlight {
        background-color: yellow;
      }

    </style>
  </head>

  <body>
    <div class="grand-parent">
      <div class="parent">
        <p id="1">This is a paragraph. 1</p>
      </div>

      <div class="parent">
        <p id="2">This is a paragraph. 2</p>
      </div>
      <div class="parent">
        <p id="3">This is a paragraph. 3</p>
      </div>
    </div>


    <script>
      const paragraph = document.getElementById('2');
      const closestParent = paragraph.closest('.parent');
      closestParent.setAttribute('style', 'background: cyan;')
      const grandParent = paragraph.closest('.grand-parent');
      grandParent.setAttribute('style', 'background: yellow;')
    </script>
  </body>

</html>