How to find a particular grand parent by Id and get value of its particular children by certain class using jQuery

Question

I have a dynamic div

<div class="illustartionWrap" id="illustartionWrapId">
     <div class="illusList illusListTop" id="illusList_heading">
            <span class="fileName">File Name</span>
            <span class="fileDesc">Description</span>
            <span class="fileSize">File Size</span>
            <span class="fileDownload">Download</span>
    </div>
    <div class="clear"></div>
    <div class="illusList">
            <span class="fileName">fileTitle</span>
            <span class="fileDesc">fileDesc</span>
            <span class="fileSize">1.18 MB</span>
            <span class="fileDownload">
                <a href="http://myfile/file.txt">
                    <img src="/sites/all/themes/petheme/images/myimage.png">
                </a>
                <a href="#">
                    <img id="illFile_6" class="illDeleteFile" src="/sites/all/themes/petheme/images/icons/deleteButton.png">//clicking it to delete the file from db 
                </a>
            </span>
        </div>
 </div>

How to get the parents of this delete button and find the filetitle class to get the title of the file.

Below is click handler which I wrote

/**delete function for my page**/
    jQuery(".illDeleteFile").on("click", function() {
        var illDeleteId = jQuery(this).attr("id").split("_");
        var illFileTitle = jQuery(this).parent("#illusList").children(".fileName").val();

        alert (illFileTitle);
});

I checked with jQuery Parent() , Parents() and children() and also find() but I am getting undefined mostly and not getting the title.

How to achieve this?

JSFIDDLE : http://jsfiddle.net/hiteshbhilai2010/ywhbd9ut/14/

Answer 1

You'll want to use:

var illFileTitle = jQuery(this).closest(".illusList").find(".fileName").text();

alert(illFileTitle);

Answer 2

See this,

jQuery(".illDeleteFile").on("click", function() {
    var illFileTitle =jQuery(this).closest(".illusList").find(".fileName").html();
    alert (illFileTitle);
});