I want to traverse across the DOM , I am not able to access the data

Question

Here is my html code in which I'm trying to traverse through DOM, basically wahen I click edit link I want to be able to traverse back to {{ $post->body }} to access content it has.

<div class="well imagess">
    <div class="row">
        <div class="col-md-1 col-sm-1 col-xs-1 col-lg-1 col-md-offset-0 col-sm-offset-0 col-lg-offset-0  col-xs-offset-0 ">
            <img src="images/female.png" style="height: 70px; width: 70px;">
        </div>
        <div class="col-md-10 col-sm-10 col-xs-10 col-lg-10 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-offset-1" style="margin-top: -15px;">
            <h5>{{ $post->title }}</h5>
            <br>
            <p style="margin-top: -15px;">Posted by - <b>{{ $post->user->first_name }} {{ $post->user->last_name }}</b> from <b>{{ $post->user->city }}, {{ $post->user->country }}</b></p>{{ $post->created_at }}
        </div>
    </div>
    <hr>
    <div class="row first">
        <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12" id="second">
            <p style="font-size: 15px;" id="post-body-edit">{{ $post->body }} </p>
        </div>
    </div>
    <div class="well wellcolor1">
        <div class="col-xs-2 col-sm-2">
            <a href="g1" style="margin-right: 70px;" title="Like"><span  style="color: blue;" class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span></a>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 ">
            <a href="g2" style="margin-right: 400px;" title="Dislike"><span  style="color: blue;" class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span></a>
        </div>
        @if(Auth::user() == $post->user)
        <div class="col-xs-2 col-sm-2 col-lg-2 col-md-2 col-sm-offset-3 col-xs-offset-3 col-lg-offset-3 col-md-offset-3 edit-class">
            <a style="margin-right: 70px;" id="edit" href="#" title="Edit"><span style="color: green;" class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
        </div>
        <div class="col-xs-2 col-sm-2 col-lg-2 col-md-2">
            <a href="{{ route('posts.delete', ['id' => $post->id]) }}" title="Delete"><span style="color: red;" class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
        </div>
        @endif
        <br>
        <div class="3">
            <a href="#" class="btn btn-default" style="margin-top: 20px;" role="button">Comments</a>
        </div>
    </div>

and then javascript code

$('.wellcolor1').find('.edit-class').find('#edit').on('click', function(event){

    event.preventDefault();
     var postBody = event.target.parentNode.parentNode.previousSibling.firstChild.childNodes[1].textContent;

    $('#post-body').val(postBody);  

    $('#edit-modal').modal();
});

I want to get {{ $post->body }} content into the modal, my main concern is to get how we traverse across the dom...

Answer 1

I'm going to go out on a limb here and guess you mean traverse up the DOM. In which case, use: https://api.jquery.com/closest/