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');
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.
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..
});
Try
$('.clear_text').parent().prev().find('input');
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.
$(this).parent().prev('input');