Javascript " getParent() " not working

Question

I have to hide my parent span just above <a> tag and show the span just below it.(When clicking it on the <a> tag).

I need to use getParent() because their are another same <div>s repeating

My HTML is

<div class="Test">
  <p class="commentBody">
    <span class="view_more-comment">abcd...
      <a class="view_more_link" href="javascript:void(0);" onclick="$(this).getParent().getNext().style.display='';$(this).getParent().style.display='none';">more</a>
    </span>
    <span class="view_more" style="display: none;">abcdefghijklmnopqrstuvwzyz...
      <a class="view_less_link" onclick="$(this).getParent().getPrevious().style.display='';$(this).getParent().style.display='none';">less</a>
    </span>
  </p>
</div>

When I use this console shows the error

Uncaught TypeError: $(...).getParent is not a function

Any method to solve this problem?.

Answer 1

There is no getParent() in jQuery. Use:

onclick="$(this).parent().prev().show(); $(this).parent().hide();"

Docs

Get the parent of each element in the current set of matched elements, optionally filtered by a selector.

I'd recommend you to use on for event handling and not inline handlers

EDIT

Using jQuery:

$('.view_less_link').on('click', function() {
    $(this).closest('.commentBody').find('.view_more-comment').show();
    $(this).parent().hide();
});