how do I select elements of same div as the button clicked

Question

<td class="name">
    <div class="download-ui-container">
        <div class="start-download">Starting Download..</div>
        <div class="download-progress-container">
            <div class="download-progress"></div>
        </div>
        <a class="save-file">Save File</a>
    </div>
    <a href="abc.mp4" class="download-button">abc.mp4</a>
</td>

This is my HTML Code. I have a Javascript code that executes when someone click on the link with class "download-button"

The code looks something like this

$(".download-button").click(function(event){
    document.querySelector('.download-progress-container').style.display = 'none';
});

When I click on the download-button link of the second td element, the first td element download-progress-container hides.

Answer 1

Get the common parent element and then find the element within it to hide.

$(".download-button").click(function(event){
   // prevent default click event action
   event.preventDefault();
   // get the td ancestor and get element within that td
   $(this).closest('.name').find('.download-progress-container').hide();
});

$(".download-button").click(function(event) {
  // prevent default click event action
  event.preventDefault();
  // get the td ancestor and get element within that td
  $(this).closest('.name').find('.download-progress-container').hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="name">
      <div class="download-ui-container">
        <div class="start-download">Starting Download..</div>
        <div class="download-progress-container">
          <div class="download-progress"></div>
        </div>
        <a class="save-file">Save File</a>
      </div>
      <a href="abc.mp4" class="download-button">abc.mp4</a>
    </td>
    <td class="name">
      <div class="download-ui-container">
        <div class="start-download">Starting Download..</div>
        <div class="download-progress-container">
          <div class="download-progress"></div>
        </div>
        <a class="save-file">Save File</a>
      </div>
      <a href="abc.mp4" class="download-button">abc.mp4</a>
    </td>

    <td class="name">
      <div class="download-ui-container">
        <div class="start-download">Starting Download..</div>
        <div class="download-progress-container">
          <div class="download-progress"></div>
        </div>
        <a class="save-file">Save File</a>
      </div>
      <a href="abc.mp4" class="download-button">abc.mp4</a>
    </td>
  </tr>
</table>

Answer 2

Use $(this) to hide clicked element

$(".download-button").click(function(event){

  var _t = $(this);
  
    _t.parents('td').find('.download-progress-container').hide();
    //document.querySelector('.download-button').style.display = 'none';
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td class="name">
    <div class="download-ui-container">
        <div class="start-download">Starting Download..</div>
        <div class="download-progress-container">
            <div class="download-progress"></div>
        </div>
        <a class="save-file">Save File</a>
    </div>
    <a href="javascript:;" class="download-button">abc.mp4</a>
</td>
<td class="name">
    <div class="download-ui-container">
        <div class="start-download">Starting Download..</div>
        <div class="download-progress-container">
            <div class="download-progress"></div>
        </div>
        <a class="save-file">Save File</a>
    </div>
    <a href="abc.mp4" class="download-button">abc.mp4</a>
</td>

<td class="name">
    <div class="download-ui-container">
        <div class="start-download">Starting Download..</div>
        <div class="download-progress-container">
            <div class="download-progress"></div>
        </div>
        <a class="save-file">Save File</a>
    </div>
    <a href="abc.mp4" class="download-button">abc.mp4</a>
</td>