Delete object with javascript

Question

I have designed a small panel using the following code, which will display the content to the user by clicking on it:

$('.body_panel').find('li').click(function() {
        if ($(this).has("ul")) {
            $(this).children('.icon-title-right_panel').hide();
            $(this).children('.icon-title-down_panel').show();
        } else {
            $(this).children('.icon-title-right_panel').show();
            $(this).children('.icon-title-down_panel').hide();
        }
    });


$('.MyPanel').find('li').click(function(evt) {
  evt.stopPropagation();
  $(this).children('ul').slideToggle();
});

.MyPanel ul li {
  cursor: pointer;
  position: relative;
}

.MyPanel ul li .icon-title-right_panel,
.MyPanel ul li .icon-title-down_panel {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 30px;
}

.MyPanel ul li .icon-title-down_panel {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"/>

<div class="MyPanel">

  <ul class="body_panel">
    <li class="title_panel">

      <h5>title</h5>

      <span class="fas fa-circle-chevron-right icon-title-right_panel"></span> 
      <span class="fas fa-circle-chevron-down icon-title-down_panel"></span> 

      <ul class="box-contect_panel">
        <li class="contect_panel">

          <h1>contect</h1>

        </li>
      </ul>
    </li>
  </ul>

</div>

By clicking on the title of any icon on the right side, it will be removed. and it appears by clicking again.

As I specified in the script code; What alternative code should I write to delete the icon on the right by clicking on the title and the icon on the bottom appears instead?

$('.body_panel').find('li') and $('.MyPanel').find('li') both return the same elements, since .body_panel is the child of .MyPanel. — Barmar
– Barmar, Commented Dec 26, 2022 at 23:08
The question isn't clear, but I think you want if ($(this).has("ul")) — Barmar
– Barmar, Commented Dec 26, 2022 at 23:11
What ul are you trying to find? Couldn't you find it by class instead of by element name? Also, you likely want .show()/.hide() rather than .remove(). The former keeps the element in the DOM, just hidden, whereas the latter completely deletes it from the DOM, which means you have to recreate it. — Heretic Monkey
– Heretic Monkey, Commented Dec 26, 2022 at 23:17

Ninja Work · Accepted Answer · 2022-12-26 23:30:54Z

0

Please try to do like this. the key is to catch the toggle status when you click li.

    $('.body_panel').find('li').click(function() {
      if($(this).parent().find("ul").eq(0).is(':visible')) {
        
        $(this).children('.icon-title-right_panel').show();
                    $(this).children('.icon-title-down_panel').hide();
        
      } else {
        $(this).children('.icon-title-right_panel').hide();
                    $(this).children('.icon-title-down_panel').show();
      }
               
            });
    
            $('.MyPanel').find('li').click(function(evt) {
                evt.stopPropagation();
                $(this).children('ul').slideToggle();
            });



    .MyPanel ul li {
                cursor: pointer;
                position: relative;
            }
            
            .MyPanel ul li .icon-title-right_panel,
            .MyPanel ul li .icon-title-down_panel {
                position: absolute;
                top: 0;
                right: 0;
                font-size: 30px;
            }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"/>

<div class="MyPanel">

  <ul class="body_panel">
    <li class="title_panel">

      <h5>title</h5>

      <span class="fas fa-circle-chevron-right icon-title-right_panel"></span> 
      <span class="fas fa-circle-chevron-down icon-title-down_panel"></span> 

      <ul class="box-contect_panel">
        <li class="contect_panel">

          <h1>contect</h1>

        </li>
      </ul>
    </li>
  </ul>

</div>

answered Dec 26, 2022 at 23:30

Ninja Work

7095 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Heretic Monkey Over a year ago

Please use the "Copy snippet to answer" button in the question to copy the snippet to your answer. It's also a good idea to be clear about exactly what you changed, and why.

Developer Over a year ago

My problem was inside the script code, which I changed a little with the instructions given, but I still did not get the answer until dear David F corrected the script code for me.

Ninja Work Over a year ago

It was my pleasure to help you @Developer.

Collectives™ on Stack Overflow

Delete object with javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related