Hide an element that button is contained in using jQuery/Javascript

Question

So I have some tiles that are arranged using a list of UL and then several LI tags.

I want to have a button inside one of the LI tags that will hide the whole tile when pressed.

Not sure how to go about it. Something like - this.('li').hide() but i know thats wrong lol.

Many thanks.

 <ul class="sortable grid">
        <li>Item 1</li><button onclick="hidePane()">Dismiss</button>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
    </ul>


 <script>


function hidePane(){

    this.hide();

}

 </script>

I want it to be dynamic. The intended use for this is to have a loop pulling in many tiles. So id like it to have a dismiss button on each and when clicked it will just hide tiles as you scroll.

Ionut Necula · Accepted Answer · 2017-07-20T09:35:47.683

Do not put elements outside li. In ul, first level elements inside should always be just li, so then inside the li you can put your button:

$('.sortable button').on('click', function() {
  $(this).parent('li').hide();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sortable grid">
  <li>Item 1<button>Dismiss</button></li>
  <li>Item 2<button>Dismiss</button></li>
  <li>Item 3<button>Dismiss</button></li>
</ul>

A solution based on your code, using only JavaScript would imply to use event.target to get the current clicked button and its parent using parentElement and you would also use style.display = none; because there is no hide() method in pure JavaScript:

function hidePane(event) {
  event.target.parentElement.style.display = 'none';
}

<ul class="sortable grid">
  <li>Item 1<button onclick="hidePane(event)">Dismiss</button></li>
  <li>Item 2<button onclick="hidePane(event)">Dismiss</button></li>
  <li>Item 3<button onclick="hidePane(event)">Dismiss</button></li>
  <li>Item 4<button onclick="hidePane(event)">Dismiss</button></li>
  <li>Item 5<button onclick="hidePane(event)">Dismiss</button></li>
  <li>Item 6<button onclick="hidePane(event)">Dismiss</button></li>
</ul>

@jord49, awesome. You're welcome. Happy to be of help. – Ionut Necula Jul 20 '17 at 09:32 — Ionut Necula, Jul 20 '17 at 09:32

Adeel Siddiqui · Answer 2 · 2017-07-20T10:18:26.037

You can try this:

Html code:

<ul class="sortable grid">
    <li>Item 1 <br /><input type="submit" onclick="hidePane(this);"></li>
    <li>Item 2 <br /><input type="submit" onclick="hidePane(this);"></li>
    <li>Item 3 <br /><input type="submit" onclick="hidePane(this);"></li>
    <li>Item 4 <br /><input type="submit" onclick="hidePane(this);"></li>
    <li>Item 5 <br /><input type="submit" onclick="hidePane(this);"></li>
    <li>Item 6 <br /><input type="submit" onclick="hidePane(this);"></li>
</ul>

JS code:

  function hidePane(ref) {
                $(ref).parent().hide()
            }

Thank you @Adeel You are a life saver – M.Nabeel Jul 20 '17 at 10:21 — M.Nabeel, Jul 20 '17 at 10:21

M.Nabeel · Answer 3 · 2017-07-20T10:52:27.983

It would be better if you do it by JQuery

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<ul class="sortable grid">
        <li>Item 1<button class="dismiss"> Dismiss</button></li>
        <li>Item 2<button class="dismiss"> Dismiss</button></li>
        <li>Item 3<button class="dismiss"> Dismiss</button></li>
        <li>Item 4<button class="dismiss"> Dismiss</button></li>
        <li>Item 5<button class="dismiss"> Dismiss</button></li>
        <li>Item 6<button class="dismiss"> Dismiss</button></li>
    </ul>

Here is your JS

$(".dismiss").click(function () {
 $(this).parent().hide();
});

I would recommend you to not to use html onclick() since it was considered a bad practice [Why is using onClick() in HTML a bad practice?

Andrea Brosio · Answer 4 · 2017-07-20T09:23:23.837

0

You have to use jQuery: select the item by the id and then use the hide method.

$('#id_of_li').hide();

edited Jul 20 '17 at 09:23

answered Jul 20 '17 at 09:22

Andrea Brosio

1
2

Batter remove all :P – Sourabh Somani Jul 20 '17 at 09:23
I want it to be dynamic though. The intended use for this is to have a loop pulling in many tiles. So id like it to have a dismiss button on each and when clicked it will just hide tiles as you scroll. – jord49 Jul 20 '17 at 09:24
So you need a loop and set the id with the same in the li element and the button then you have to $('#button_id').click(function() { $('#li_' + this.attr('id').split('_')[1]).hide() }) – Andrea Brosio Jul 20 '17 at 09:30

score 0 · Answer 5 · answered Jul 20 '17 at 09:36

Try this code. It allows you to hide the li containing the button.

$("#hide").on('click',function(){

 hidePane($(this).parent());
});

function hidePane(parent){
  parent.hide();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sortable grid">
        <li>Item 1 <button id="hide">Dismiss</button></li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
    </ul>

Hide an element that button is contained in using jQuery/Javascript

5 Answers5