jquery get the input element in different parent element

Question

Html

 <div>                                
    <div>
      <input type="text" class="search_input form-control" placeholder="Search..."></div>
      <span>
         <img src="images/btn-reset-search.png" class="clear_text" alt="">
       </span>
 </div>

I want to get the input field when I click on the image having classname: clear_text.

I tried :

 $('.clear_text').parent().prev('input');

Your code looks fine. Within the click handler, it becomes $(this).parent().prev('input'); — lshettyl
– lshettyl, Commented Jul 28, 2015 at 11:41

DontVoteMeDown · Accepted Answer · 2015-07-28 11:39:30Z

2

Try this:

$('.clear_text').on("click", function()
{
    $(this).closest("div").find("input");
});

It navigates to the first parent div(closest("div")) then searches for an input(find("input")) inside it. You can use input:first if you not sure how many inputs the div element may have.

answered Jul 28, 2015 at 11:39

DontVoteMeDown

21.5k10 gold badges72 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hcorg · Accepted Answer · 2015-07-28 11:57:51Z

2

Solution:

$(document).on('click', '.clear_text', function(){
     var $input = $(this).closest("div").find("input");
     //do whatever you want with $input, $input.val(), $input.addClass(), etc..
});

edited Jul 28, 2015 at 11:57

Hcorg

12.2k3 gold badges33 silver badges40 bronze badges

answered Jul 28, 2015 at 11:43

futualien

1116 bronze badges

Comments

Sudharsan S · Accepted Answer · 2015-07-28 11:40:33Z

0

Try

 $('.clear_text').parent().prev().find('input');

answered Jul 28, 2015 at 11:40

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

Comments

Rajan Goswami · Accepted Answer · 2015-07-28 11:49:20Z

0

Try the following solution:

$(function(){
  $(".clear_text").click(function(){
    var inputField = $(this).parent().closest('input[type="text"]');
  })
})

OR

$(function(){
  $(".clear_text").click(function(){
    var inputField = $(this).parent().parent().find('input[type="text"]');
  })
})

Here inputField is the required input.

edited Jul 28, 2015 at 11:49

answered Jul 28, 2015 at 11:43

Rajan Goswami

7691 gold badge5 silver badges17 bronze badges

3 Comments

Dhaval Marthak Over a year ago

I don't think this will work! You might need to refer .closest()

Rajan Goswami Over a year ago

May i know the reason.

Dhaval Marthak Over a year ago

Reson: Updated in first comment look closely at link

Collectives™ on Stack Overflow

jquery get the input element in different parent element

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related