How to select the input with jquery?

Question

I want to get the value of a input and i want to do it with jquery.

I just want to get the value of the hidden input with name="picture" when I click on حذف این بخش button which have onclick="deleteDefaultSection($(this)) . I have used .parent() function to come out of that scope. But when I'm in the div with class="ribbon-wrapper card" . I cant go into the div with class="col-md-12" and select the value of hidden input with class="picture" in it.

 <div class="ribbon-wrapper card"> <div class="card-header"> <div class="ribbon ribbon-default pull-right"> <input type="text" style="height: 24px; border-radius: 3px; border: none; padding: 5px; font-size: 12px; width: 130px; text-align: center; font-weight: normal;" name="name" class="nameSection" placeholder="بازه زمانی را وارد کنید" value="<%= analysis.timeFrames[i] %>" /> </div> </div> <div class="card-body"> <div style="float: right; top: 15px; right: 20px;"> <button type="button" class="btn btn-sm btn-outline-primary" data-toggle="modal" data-target="#AddSection" data-type="">اضافه کردن عکس </button> <button type="button" class="btn btn-sm btn-outline-danger" onclick="deleteDefaultSection($(this))">حذف این بخش </button> </div> </div> <!-- This row is for showing the uploaded image and its description --> <div class="row"> <div class="col-md-12" style="text-align: center;"> <input type="hidden" class="picture" name="picture" value="<%= analysis.images[i] %>"> <input type="hidden" class="details" name="details" value="<%= analysis.imagesDesc[i] %>"> <input type="hidden" class="sectionname" name="timeFrames" value="<%= analysis.timeFrames[i] %>"> <div class="boxUploadImage Active" data-typeSection="<%= i %>" data-name="<%= i + 64 %>"> <img onclick="viewPicture($(this))" src="<%= analysis.images[i] %>" width="80%" height="200px"> <div data-toggle="modal" data-target="#viewDiscription" onclick="viewDetails($(this))" class="p "> <%= analysis.imagesDesc[i] %> </div> <div class="boxBotton row my-5"> <div class="col-lg-7 mr-4"> <button class="btn btn-block btn-sm btn-twitter" data-toggle="modal" data-target="#EditSection" onclick="editSection($(this), event)">ویرایش</button> </div> <div class="col-lg-4"> <button class="btn btn-block btn-sm btn-danger deleteSection" onclick="deleteSection($(this))">حذف</button> </div> </div> </div> </div> </div> </div>

Answer 1

You can do it like this:

function deleteDefaultSection(obj) {
  var pic = obj.closest(".card").find('[name="picture"]');
  console.log(pic.val());
}

.closest(".card") travels up in the html and selects the first element with the class card it finds.

Then you can use .find() and combine it with [name="picture"] to get the element that has the name attribute with the value picture of it

Demo

 function deleteDefaultSection(obj) { var pic = obj.closest(".card").find('[name="picture"]'); console.log(pic.val()); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="ribbon-wrapper card"> <div class="card-header"> <div class="ribbon ribbon-default pull-right"> <input type="text" style="height: 24px; border-radius: 3px; border: none; padding: 5px; font-size: 12px; width: 130px; text-align: center; font-weight: normal;" name="name" class="nameSection" placeholder="بازه زمانی را وارد کنید" value="<%= analysis.timeFrames[i] %>" /> </div> </div> <div class="card-body"> <div style="float: right; top: 15px; right: 20px;"> <button type="button" class="btn btn-sm btn-outline-primary" data-toggle="modal" data-target="#AddSection" data-type="">اضافه کردن عکس </button> <button type="button" class="btn btn-sm btn-outline-danger" onclick="deleteDefaultSection($(this))">حذف این بخش </button> </div> </div> <!-- This row is for showing the uploaded image and its description --> <div class="row"> <div class="col-md-12" style="text-align: center;"> <input type="hidden" class="picture" name="picture" value="Hiddenvalue"> <input type="hidden" class="details" name="details" value="<%= analysis.imagesDesc[i] %>"> <input type="hidden" class="sectionname" name="timeFrames" value="<%= analysis.timeFrames[i] %>"> <div class="boxUploadImage Active" data-typeSection="<%= i %>" data-name="<%= i + 64 %>"> <img onclick="viewPicture($(this))" src="<%= analysis.images[i] %>" width="80%" height="200px"> <div data-toggle="modal" data-target="#viewDiscription" onclick="viewDetails($(this))" class="p "> <%= analysis.imagesDesc[i] %> </div> <div class="boxBotton row my-5"> <div class="col-lg-7 mr-4"> <button class="btn btn-block btn-sm btn-twitter" data-toggle="modal" data-target="#EditSection" onclick="editSection($(this), event)">ویرایش</button> </div> <div class="col-lg-4"> <button class="btn btn-block btn-sm btn-danger deleteSection" onclick="deleteSection($(this))">حذف</button> </div> </div> </div> </div> </div> </div>