JQuery closest attribute returns undefined

Question

I have been looking at some other examples, but they're not quite the same unfortunately. I am trying to delete some data onclick (omitted that part here, only need the id for that). Problem is that it returns undefined for the id I want.

 function deleteMessage(){
    var $currentId = $(this).closest(".ulrecords").attr('id');
    alert("ID: " + $currentId)
 }

The method is being called as follow

<a href="javascript:deleteMessage();" id="amessage">

And the HTML looks like this

<ul class="chat-messages">
  <ul id="msg_1234567890_a1bs2e" class="ulrecords">
   <li>
     John
     <span>27 minutes ago</span>
      <a href="javascript:deleteMessage();" id="amessage"> X</a>
    </li>
    <li id="limessage">
       Some message here
    </li>
  </ul>
  <ul id="msg_9234742878_73bhad" class="ulrecords">
   <li>
     John
     <span>28 minutes ago</span>
      <a href="javascript:deleteMessage();" id="amessage"> X</a>
    </li>
    <li id="limessage">
       Some other message here
    </li>
  </ul>
</ul>

So when i click on the in one of the ul's I want to obtain that Hope anyone can point me in the right direction

Just a reference, but you should nest your `ul` inside `li` - not sure if this could cause your issue, but your `
` seems semantically incorrect (cf. http://stackoverflow.com/questions/5899337/proper-way-to-make-html-nested-list) — somethinghere, Mar 14 '16 at 12:20
is it requirement to use it like `` instead of `$('a').click(deleteMessage)` — llamerr, Mar 14 '16 at 12:21
Check what this refers to in the context of the method. I'm not sure if it's the context element when the function is called through an href like your doing. — Konstantin Dinev, Mar 14 '16 at 12:21

score 5 · Accepted Answer · answered Mar 14 '16 at 12:21

Because this is window in your case.

Either pass in the reference to the element you clicked on

<a href="javascript:deleteMessage(this);" id="amessage">

and

function deleteMessage(elem){
    var $currentId = $(elem).closest(".ulrecords").attr('id');
    alert("ID: " + $currentId)
}

or better yet, attach events with eventListeners.

$(document).on("click", ".ulrecords", function () {
    alert(this.id);
});

or

$(document).on("click", ".ulrecords a", function () {
    var $currentId = $(this).closest(".ulrecords").attr('id');
});

Also ids are singular.

score 0 · Answer 2 · answered Mar 14 '16 at 12:26

You're calling the method through an href link, which does not set the execution context for the method to be the element clicked. In order to get the correct element, don't call the method through href, but rather attach a click handler to it. Now, your anchors have duplicate IDs, which is a whole lot different issue that you need to fix.

I'm putting a class to all your anchors in the example to select them easily with jQuery.

<a href="javascript:deleteMessage();" class="my-button">X</a>

And JavaScript:

$(function () {
    $(document).on("click", ".my-button", function () {
        var $currentId = $(this).closest(".ulrecords").attr('id');
        alert("ID: " + $currentId);
    });
});

score 0 · Answer 3 · answered Mar 14 '16 at 12:28

$(document).ready(function() {
  $('.delmsg').click(function() {
   alert($(this).parent().parent('ul').attr('id'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="chat-messages">
  <ul id="msg_1234567890_a1bs2e" class="ulrecords">
   <li>John <span>27 minutes ago</span> <a href="javascript:deleteMessage();" class="delmsg">X</a></li>
   <li id="limessage">Some message here</li>
  </ul>
  <ul id="msg_9234742878_73bhad" class="ulrecords">
   <li>John <span>28 minutes ago</span> <a href="javascript:deleteMessage();" class="delmsg">X</a></li>
   <li id="limessage">Some other message here</li>
  </ul>
</ul>

score 0 · Answer 4 · answered Mar 14 '16 at 12:32

$(function(){
  $('.remove').on('click', function(){
    var currentId = $(this).closest(".ulrecords").attr('id');
    console.log(currentId);
  });  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="msg_1234567890_a1bs2e" class="ulrecords">
  <li>
    John
    <span>27 minutes ago</span>
    <a href="javascript:void(0);" class="remove"> X</a>
  </li>
  <li id="limessage">
    Some message here
  </li>
</ul>
<ul id="msg_9234742878_73bhad" class="ulrecords">
  <li>
    John
    <span>28 minutes ago</span>
    <a href="javascript:void(0);" class="remove"> X</a>
  </li>
  <li id="limessage">
    Some other message here
  </li>
</ul>

JQuery closest attribute returns undefined

4 Answers4