Div Button hide not working properly in this code

Question

Here i have two row, in that two row i have two button.

First Button

<button class="button button4 prlstbtn changedBTN" onclick="checkvalidlogin('10','0','Raju','9090909090','',' Lakshmi Layout','....@gmail.com','')" style="padding-left: 0px;padding-right: 0px;display: none">Viewed</button>

Second Button

<button class="button button4 prlstbtn changeBTN" onclick="checkvalidlogin('10','0','Raju','9090909090','',' Lakshmi Layout','....@gmail.com','')" style="padding-left: 0px;padding-right: 0px;">
Contact 
Bulider</button>

My requirement is suppose i clicked the Contact Bulider button means i want hide this button ,i want to show Viewed button.

function checkvalidlogin(property_id, postedCustomerId, fullName, contactNumber, house, sublocality, emailId, excat_address) {
  var $list = $(this).closest(".prptylsttNew ");
  id = $list.find(".changeBTN").hide();
  console.log(id)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="row box adjust prptylsttNew rentLoopListing" style=" margin-left:15px;margin-right:9px;padding: 10px;background-color:#fff;">
  <div class="col-md-4 mgb">
    <img src="uploads/toletlist.jpg" class="img-thumbnail" height="150" width="100%" alt="No Image" onclick="rentlist_loginnn('10')">
  </div>
  <div class="col-md-8" style="text-align: -webkit-center;">
    <div style="background-color: #fff;padding: 12px;">
      <h4 style="margin-top: 0px;" class="hov">1 RK Apartment for Rent in Marathahalli</h4>
      <input type="hidden" value="10" class="propertyId">
    </div>
    <hr style="margin-top: 0px;margin-bottom: 0px;border-color: rgba(0, 0, 0, 0.23);">
    <div style="background-color:#fff;padding:12px;">
      <div class="row">
        <div class="col-md-4" style="padding-left: 0px;padding-right: 0px;">
          <h5 style="margin-top: 0px;">Rent:&nbsp;<span><i class="fa fa-inr" aria-hidden="true"></i></span> 7976 </h5>
        </div>
        <div class="col-md-4" style="padding-left: 0px;padding-right: 0px;">
          <h5 style="margin-top: 0px;"> Fully-Furnished</h5>
        </div>
        <div class="col-md-4" style="padding-left: 0px;padding-right: 0px;">
          <h5 style="margin-top: 0px;">-Square feet </h5>
        </div>
      </div>
    </div>
    <div class="row prptylstt">
      <div class="col-md-5 col-sm-6 col-xs-6">
        <a href="rentdetails.php?id=MTA=" target="_blank" class="p_id"> <button class="button button3"> View Details</button></a>
      </div>
      <div class="col-md-1"> </div>
      <div class="col-md-6 col-sm-6 col-xs-6">
        <button class="button button4 prlstbtn changedBTN" onclick="checkvalidlogin('10','0','Raju','9090909090','',' Lakshmi Layout','....@gmail.com','')" style="padding-left: 0px;padding-right: 0px;display: none">Viewed</button>
        
        <button class="button button4 prlstbtn changeBTN" onclick="checkvalidlogin('10','0','Raju','9090909090','',' Lakshmi Layout','....@gmail.com','')" style="padding-left: 0px;padding-right: 0px;">
Contact 
Bulider</button>
      </div>
    </div>
  </div>
</div>










<div class="row box adjust prptylsttNew rentLoopListing" style=" margin-left:15px;margin-right:9px;padding: 10px;background-color:#fff;">
  <div class="col-md-4 mgb">
    <img src="uploads/toletlist.jpg" class="img-thumbnail" height="150" width="100%" alt="No Image" onclick="rentlist_loginnn('9')">
  </div>
  <div class="col-md-8" style="text-align: -webkit-center;">
    <div style="background-color: #fff;padding: 12px;">
      <h4 style="margin-top: 0px;" class="hov">2 BHK Individual House for Rent in Marathahalli</h4>
      <input type="hidden" value="9" class="propertyId">
    </div>
    <hr style="margin-top: 0px;margin-bottom: 0px;border-color: rgba(0, 0, 0, 0.23);">
    <div style="background-color:#fff;padding:12px;">
      <div class="row">
        <div class="col-md-4" style="padding-left: 0px;padding-right: 0px;">
          <h5 style="margin-top: 0px;">Rent:&nbsp;<span><i class="fa fa-inr" aria-hidden="true"></i></span> 8000 </h5>
        </div>
        <div class="col-md-4" style="padding-left: 0px;padding-right: 0px;">
          <h5 style="margin-top: 0px;"> Semi-Furnished</h5>
        </div>
        <div class="col-md-4" style="padding-left: 0px;padding-right: 0px;">
          <h5 style="margin-top: 0px;">-Square feet </h5>
        </div>
      </div>
    </div>
    <div class="row prptylstt">
      <div class="col-md-5 col-sm-6 col-xs-6">
        <a href="rentdetails.php?id=OQ==" target="_blank" class="p_id"> <button class="button button3"> View Details</button></a>
      </div>
      <div class="col-md-1"> </div>
      <div class="col-md-6 col-sm-6 col-xs-6">
        <button class="button button4 prlstbtn changedBTN" onclick="checkvalidlogin('9','7','Sarvan','8277904354','',' Lakshmi Layout','....@gmail.com','')" style="padding-left: 0px;padding-right: 0px;display: none">Viewed</button>
        <button class="button button4 prlstbtn changeBTN" onclick="checkvalidlogin('9','7','Sarvan','8277904354','',' Lakshmi Layout','....@gmail.com','')" style="padding-left: 0px;padding-right: 0px;">
Contact 
Bulider</button>
      </div>
    </div>
  </div>
</div>

Does it really trigger the function on click? if so then why don't you add an id on the button and use simple jquery toggle function? — Julo0sS, Sep 01 '17 at 08:09
Just call the hide() function without assigning it to the id variable. — DjaouadNM, Sep 01 '17 at 08:10
@ Mr Geek, if i do only hide means all button hiding,my requirement is if i click first row button, it should hide only first row button — , Sep 01 '17 at 08:14

score 0 · Accepted Answer · edited Sep 01 '17 at 08:21

The problem is that var $list = $(this) the code dont know what this refers to.

I've changed your function to this:

function checkvalidlogin(property_id, postedCustomerId, fullName, contactNumber, house, sublocality, emailId, excat_address, obj) {
  var $list = $(obj).parents(".prptylsttNew");
  $list.find(".changeBTN").hide();
}

Now your buttons look like:

<button class="button button4 prlstbtn changedBTN" onclick="checkvalidlogin('10','0','Raju','9090909090','',' Lakshmi Layout','....@gmail.com','', this)" style="padding-left: 0px;padding-right: 0px;display: none">Viewed</button>

Added this to the end of your click event

'...@gmail.com','', this)
                    ^^^^

function checkvalidlogin(property_id, postedCustomerId, fullName, contactNumber, house, sublocality, emailId, excat_address, obj) {
  var $list = $(obj).parents(".prptylsttNew");
  $list.find(".changeBTN").hide();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row box adjust prptylsttNew rentLoopListing" style=" margin-left:15px;margin-right:9px;padding: 10px;background-color:#fff;">
  <div class="col-md-4 mgb">
    <img src="uploads/toletlist.jpg" class="img-thumbnail" height="150" width="100%" alt="No Image" onclick="rentlist_loginnn('10')">
  </div>
  <div class="col-md-8" style="text-align: -webkit-center;">
    <div style="background-color: #fff;padding: 12px;">
      <h4 style="margin-top: 0px;" class="hov">1 RK Apartment for Rent in Marathahalli</h4>
      <input type="hidden" value="10" class="propertyId">
    </div>
    <hr style="margin-top: 0px;margin-bottom: 0px;border-color: rgba(0, 0, 0, 0.23);">
    <div style="background-color:#fff;padding:12px;">
      <div class="row">
        <div class="col-md-4" style="padding-left: 0px;padding-right: 0px;">
          <h5 style="margin-top: 0px;">Rent:&nbsp;<span><i class="fa fa-inr" aria-hidden="true"></i></span> 7976 </h5>
        </div>
        <div class="col-md-4" style="padding-left: 0px;padding-right: 0px;">
          <h5 style="margin-top: 0px;"> Fully-Furnished</h5>
        </div>
        <div class="col-md-4" style="padding-left: 0px;padding-right: 0px;">
          <h5 style="margin-top: 0px;">-Square feet </h5>
        </div>
      </div>
    </div>
    <div class="row prptylstt">
      <div class="col-md-5 col-sm-6 col-xs-6">
        <a href="rentdetails.php?id=MTA=" target="_blank" class="p_id"> <button class="button button3"> View Details</button></a>
      </div>
      <div class="col-md-1"> </div>
      <div class="col-md-6 col-sm-6 col-xs-6">
        <button class="button button4 prlstbtn changedBTN" onclick="checkvalidlogin('10','0','Raju','9090909090','',' Lakshmi Layout','....@gmail.com','', this)" style="padding-left: 0px;padding-right: 0px;display: none">Viewed</button>
        <button class="button button4 prlstbtn changeBTN" onclick="checkvalidlogin('10','0','Raju','9090909090','',' Lakshmi Layout','....@gmail.com','', this)" style="padding-left: 0px;padding-right: 0px;">
Contact 
Bulider</button>
      </div>
    </div>
  </div>
</div>










<div class="row box adjust prptylsttNew rentLoopListing" style=" margin-left:15px;margin-right:9px;padding: 10px;background-color:#fff;">
  <div class="col-md-4 mgb">
    <img src="uploads/toletlist.jpg" class="img-thumbnail" height="150" width="100%" alt="No Image" onclick="rentlist_loginnn('9')">
  </div>
  <div class="col-md-8" style="text-align: -webkit-center;">
    <div style="background-color: #fff;padding: 12px;">
      <h4 style="margin-top: 0px;" class="hov">2 BHK Individual House for Rent in Marathahalli</h4>
      <input type="hidden" value="9" class="propertyId">
    </div>
    <hr style="margin-top: 0px;margin-bottom: 0px;border-color: rgba(0, 0, 0, 0.23);">
    <div style="background-color:#fff;padding:12px;">
      <div class="row">
        <div class="col-md-4" style="padding-left: 0px;padding-right: 0px;">
          <h5 style="margin-top: 0px;">Rent:&nbsp;<span><i class="fa fa-inr" aria-hidden="true"></i></span> 8000 </h5>
        </div>
        <div class="col-md-4" style="padding-left: 0px;padding-right: 0px;">
          <h5 style="margin-top: 0px;"> Semi-Furnished</h5>
        </div>
        <div class="col-md-4" style="padding-left: 0px;padding-right: 0px;">
          <h5 style="margin-top: 0px;">-Square feet </h5>
        </div>
      </div>
    </div>
    <div class="row prptylstt">
      <div class="col-md-5 col-sm-6 col-xs-6">
        <a href="rentdetails.php?id=OQ==" target="_blank" class="p_id"> <button class="button button3"> View Details</button></a>
      </div>
      <div class="col-md-1"> </div>
      <div class="col-md-6 col-sm-6 col-xs-6">
        <button class="button button4 prlstbtn changedBTN" onclick="checkvalidlogin('9','7','Sarvan','8277904354','',' Lakshmi Layout','....@gmail.com','', this)" style="padding-left: 0px;padding-right: 0px;display: none">Viewed</button>
        <button class="button button4 prlstbtn changeBTN" onclick="checkvalidlogin('9','7','Sarvan','8277904354','',' Lakshmi Layout','....@gmail.com','', this)" style="padding-left: 0px;padding-right: 0px;">
Contact 
Bulider</button>
      </div>
    </div>
  </div>
</div>

Div Button hide not working properly in this code

1 Answers1