Why my (this).closest('.row').find('.col-lg-10').remove(); doesn't work and sending me errors in log?

<div class="row section-first">
    <div class="col-lg-2 text-center text-grayer my-auto p-2">
        <p class="h6">Newbie</p>
        <p class="h5">
            <i class="fa fa-diamond m-1" aria-hidden="true"></i>
            <i class="fa fa-diamond m-1" aria-hidden="true"></i>
        </p>
        <a href="http://localhost/forum/uzytkownik/krystian2160"><img class="mb-1 border-gray" src="http://localhost/forum/public/storage/avatars/1598320e3908c6.jpg" style="width: 112px; height: 112px;"/></a>
        <p class="small m-0">Cirapuszka</p>
        <!-----------------------------------------------------------------------------Reputacja----------->

        <p class="m-0"><span class="badge bg-success"><i class="fa fa-plus-square" aria-hidden="true"></i> 0</span></p>
        <p class="m-0"><span class="badge bg-inverse"><i class="fa fa-minus-square" aria-hidden="true"></i> 0</span></p>
        <p class="text-muted">3 postów</p>

        <!------------------------------------------------------------------------Button do edycji posta--->

        <button class="btn btn-info btn-sm pointer post-edit">Edytuj Post</button>
    </div>
    <div class="col-lg-10 text-gray p-2">
        <p>
            Lorem ipsum dolor sit amet...
        </p>
    </div>
    <div class="offset-lg-2 small col-lg-9">
    </div>

This is my HTML And I have here this button

<button class="btn btn-info btn-sm pointer post-edit">
                        Edytuj Post
                    </button>

It it scripted in jquery like this:

$(document).on('click', 'button.post-edit', function(e){
                    e.preventDefault();
                    (this).closest('.row').find('.col-lg-10').remove();
                });

Uncaught TypeError: this.closest(...).find is not a function
    at HTMLButtonElement.<anonymous> (voluptas-eum-voluptatem-soluta-numquam-ipsum-totam-est:293)
    at HTMLDocument.dispatch (jquery.js:3)
    at HTMLDocument.q.handle (jquery.js:3)

It works when it is like (this).closest('.row').remove(); It deletes whole row, but it's not what I intend to do.

col-lg-10 containing content in this post have to be deleted.

So I try using (this).closest('.row').find('.col-lg-10').remove(); but as I said this doesn't work and I don't know why, because we go first to .row by traversing UP in DOM by closest and then down by find to col-lg-10

What is wrong here?

Why my (this).closest('.row').find('.col-lg-10').remove(); doesn't work and sending me errors in log?

<div class="row section-first">
    <div class="col-lg-2 text-center text-grayer my-auto p-2">
        <p class="h6">Newbie</p>
        <p class="h5">
            <i class="fa fa-diamond m-1" aria-hidden="true"></i>
            <i class="fa fa-diamond m-1" aria-hidden="true"></i>
        </p>
        <a href="http://localhost/forum/uzytkownik/krystian2160"><img class="mb-1 border-gray" src="http://localhost/forum/public/storage/avatars/1598320e3908c6.jpg" style="width: 112px; height: 112px;"/></a>
        <p class="small m-0">Cirapuszka</p>
        <!-----------------------------------------------------------------------------Reputacja----------->

        <p class="m-0"><span class="badge bg-success"><i class="fa fa-plus-square" aria-hidden="true"></i> 0</span></p>
        <p class="m-0"><span class="badge bg-inverse"><i class="fa fa-minus-square" aria-hidden="true"></i> 0</span></p>
        <p class="text-muted">3 postów</p>

        <!------------------------------------------------------------------------Button do edycji posta--->

        <button class="btn btn-info btn-sm pointer post-edit">Edytuj Post</button>
    </div>
    <div class="col-lg-10 text-gray p-2">
        <p>
            Lorem ipsum dolor sit amet...
        </p>
    </div>
    <div class="offset-lg-2 small col-lg-9">
    </div>

This is my HTML And I have here this button

<button class="btn btn-info btn-sm pointer post-edit">
                        Edytuj Post
                    </button>

It it scripted in jquery like this:

$(document).on('click', 'button.post-edit', function(e){
                    e.preventDefault();
                    (this).closest('.row').find('.col-lg-10').remove();
                });

Uncaught TypeError: this.closest(...).find is not a function
    at HTMLButtonElement.<anonymous> (voluptas-eum-voluptatem-soluta-numquam-ipsum-totam-est:293)
    at HTMLDocument.dispatch (jquery.js:3)
    at HTMLDocument.q.handle (jquery.js:3)

It works when it is like (this).closest('.row').remove(); It deletes whole row, but it's not what I intend to do.

col-lg-10 containing content in this post have to be deleted.

So I try using (this).closest('.row').find('.col-lg-10').remove(); but as I said this doesn't work and I don't know why, because we go first to .row by traversing UP in DOM by closest and then down by find to col-lg-10

What is wrong here?

• javascript
• jquery
• html
• dom

• change it to $(this).closest('.row').find('.col-lg-10').remove(); – Özgür Yalçın Commented Aug 21, 2017 at 17:47
• 5 hah, haha. that .closest isn't jQuery, it's the one that browsers now provide. you've forgotten a $ at the start of that line. dom nodes don't have a .find method. They do however have a querySelector method. – Kevin B Commented Aug 21, 2017 at 17:47
• (this).closest('.row').find('.col-lg-10').remove(); need to be $(this).closest('.row').find('.col-lg-10').remove();.Seems like TYPO mistake – Death-is-the-real-truth Commented Aug 21, 2017 at 17:47
• 2 If there's only one col-lg-10 element to remove, you can do it without jQuery like this: this.closest('.row').querySelector('.col-lg-10').remove() – spanky Commented Aug 21, 2017 at 17:51

1 Answer 1

As noted in the question ments, you're missing the jQuery identifier.

Change this:

(this).closest('.row').find('.col-lg-10').remove();

To this:

$(this).closest('.row').find('.col-lg-10').remove();