CODEWITHSUNDEEP
jquery
passerby
passerby

Reputation: 171

How to hide same level divisions in JQuery?

I'm pretty new to JQuery since I'm mostly backend. So I have a table that goes like this:

<tr>
<td>
    <div class="div-package-service"><a style="cursor: pointer" id="service_"+id+" class="package-service"> Service Name </a></div>                
    <span><br>ANYTIME</span>
    <div><br><a style="cursor: pointer" class="remove-button">Remove></a></div>
</td>

The row generation is on loop, hence the id variable in service id. Now I am trying to hide the "div-package-service", I am using this jQuery code:

   var hideSchedule = {  
   removeServiceSchedule: function (span) {
        $(span).siblings().find('div').hide();
    }
}

$(document).on('click', '.remove-button', function (e) {
    e.preventDefault();
    hideSchedule.removeServiceSchedule(this);
});

I tried various approaches, but I still don't get it. I could do it on other segments of my system but I can't do it here. Appreciate the help!

Upvotes: 0

Views: 183

Answers (1)

hityagi
hityagi

Reputation: 5256

There are few things :

  1. as pointed by Özgür Ersil, id of the element is not generated properly. it should have been something like : id="service_"+id

  2. You have written a trigger on : .package-service-remove and there is no such class in the html (at-least not in the one posted).

  3. If you meant remove-button to remove service name, then, remove button is in a div, so it does not have service name div as its sibling. Its parent have service name div as the sibling , notice : $(span).parent().siblings('div') in the below code

var hideSchedule = {  
   removeServiceSchedule: function (span) {
        $(span).parent().siblings('div').hide();
    }
}

$(document).on('click', '.remove-button', function (e) {
    e.preventDefault();
    hideSchedule.removeServiceSchedule(this);
});    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1">
<tr>
<td>
    <div class="div-package-service"><a style="cursor: pointer" id="service_1" class="package-service"> Service Name </a></div>     
    <span><br>ANYTIME</span>
    <div><br><a style="cursor: pointer" class="remove-button">Remove</a></div>
</td>
</tr>
<tr>
<td>
    <div class="div-package-service"><a style="cursor: pointer" id="service_2" class="package-service"> Service Name </a></div>                
    <span><br>ANYTIME</span>
    <div><br><a style="cursor: pointer" class="remove-button">Remove</a></div>
</td>
</tr>
</table>

And below code removes(hides) the entire row) 

var hideSchedule = {
  removeServiceSchedule: function(span) {
    $(span).parents("tr").hide();
  }
}

$(document).on('click', '.remove-button', function(e) {
  e.preventDefault();
  hideSchedule.removeServiceSchedule(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td>
      <div class="div-package-service"><a style="cursor: pointer" id="service_1" class="package-service"> Service Name 1</a></div>
      <span><br>ANYTIME</span>
      <div><br><a style="cursor: pointer" class="remove-button">Remove</a></div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="div-package-service"><a style="cursor: pointer" id="service_2" class="package-service"> Service Name 2</a></div>
      <span><br>ANYTIME</span>
      <div><br><a style="cursor: pointer" class="remove-button">Remove</a></div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="div-package-service"><a style="cursor: pointer" id="service_3" class="package-service"> Service Name 3</a></div>
      <span><br>ANYTIME</span>
      <div><br><a style="cursor: pointer" class="remove-button">Remove</a></div>
    </td>
  </tr>
</table>

Upvotes: 1

Related Questions