I feel like this would be simple enough, but I'm clearly missing something. When clicking an "X" icon for each panel-title, I need to capture that title, like "CUSTOMER" for example. Maybe it's because my span is in another A tag? I need to know the name on the panel-title so I can tell the database which attribute to remove. Thanks in advance.

jQuery

$('.fa-times').click(function(){
    //alert('Delete this panel-title')
    alert($(this).closest('span.jumpScreen').text())
})

HTML

<h4 class="panel-title">
    <a class="accordion-toggle pad" data-toggle="collapse" data-parent="#accordion2" href="#collapse_0">
        <i class="fa fa-chevron-down disabledArrow">&darr;</i>
    </a>
    <a href="" target="_blank">
        <span class="jumpScreen">CUSTOMER</span>
    </a>
    <a class="attrDel" onclick="attrDel(this.id)" id="del_0">
        &nbsp;<i class="fa fa-times">X</i>
    </a>
</h4>
<h4 class="panel-title">
    <a class="accordion-toggle pad" data-toggle="collapse" data-parent="#accordion2" href="#collapse_0">
        <i class="fa fa-chevron-down disabledArrow">&darr;</i>
    </a>
    <a href="" target="_blank">
        <span class="jumpScreen">ATTRIBUTES</span>
    </a>
    <a class="attrDel" onclick="attrDel(this.id)" id="del_0">
        &nbsp;<i class="fa fa-times">X</i>
    </a>
</h4>

/

I feel like this would be simple enough, but I'm clearly missing something. When clicking an "X" icon for each panel-title, I need to capture that title, like "CUSTOMER" for example. Maybe it's because my span is in another A tag? I need to know the name on the panel-title so I can tell the database which attribute to remove. Thanks in advance.

jQuery

$('.fa-times').click(function(){
    //alert('Delete this panel-title')
    alert($(this).closest('span.jumpScreen').text())
})

HTML

<h4 class="panel-title">
    <a class="accordion-toggle pad" data-toggle="collapse" data-parent="#accordion2" href="#collapse_0">
        <i class="fa fa-chevron-down disabledArrow">&darr;</i>
    </a>
    <a href="" target="_blank">
        <span class="jumpScreen">CUSTOMER</span>
    </a>
    <a class="attrDel" onclick="attrDel(this.id)" id="del_0">
        &nbsp;<i class="fa fa-times">X</i>
    </a>
</h4>
<h4 class="panel-title">
    <a class="accordion-toggle pad" data-toggle="collapse" data-parent="#accordion2" href="#collapse_0">
        <i class="fa fa-chevron-down disabledArrow">&darr;</i>
    </a>
    <a href="" target="_blank">
        <span class="jumpScreen">ATTRIBUTES</span>
    </a>
    <a class="attrDel" onclick="attrDel(this.id)" id="del_0">
        &nbsp;<i class="fa fa-times">X</i>
    </a>
</h4>

http://jsfiddle/4jwao0pt/

• javascript
• jquery
• find
• alert
• closest

• You can identify the parent container and then find the element you want within it. jsfiddle/4jwao0pt/3 – mspaly Commented Aug 14, 2014 at 16:56

2 Answers 2

There is no closest span, the span is in an anchor that is a sibling of the parent anchor the i element is in

$('.fa-times').click(function(){
    var elem = $(this).closest('a').prev('a').find('span.jumpScreen');

    alert( elem.text() );
});

I think the proper way to solve this is to go back up to the parent .panel-title and then search for the .jumpScreen.

$('.attrDel').click(function () {
  console.log( $(this).closest('.panel-title').find('.jumpScreen').text() );
});

See also:

• http://api.jquery./children/
• http://api.jquery./find/