javascript - 使用切换按钮删除容器

Question

我想使用切换按钮显示/隐藏容器(请参见下面的代码)。它在第一次点击时成功添加了容器，但在第二次点击后没有正确删除。有谁知道问题出在哪里？

let toggle_button = $('#toggle-btn');
let button_container = $('#button-container');

toggle_button.on('click', function (event) {

  event.stopPropagation();
  
  let container = get_container();
  toggle_button.toggleClass('toggled');
  
  if (toggle_button.hasClass('toggled')) {
    button_container.after(container);
  } else {
    container.remove();
  }
  
});


function get_container ()
{
  return $('<div/>').css({ 
    width: '100%', height: 'auto', 
    background: 'yellow' 
  }).html('container');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="button-container" style="width:100%;height:auto;background:#000;">
  <button id="toggle-btn">Toggle Button</button>
</div>

Answer 1

您可以将 remove 与 DOM 元素引用一起使用

let toggle_button = $('#toggle-btn')
toggle_button.on('click', function (event) {

  event.stopPropagation();
   
  // Get container
  let container = get_container();
  
  // Toggle class
  toggle_button.toggleClass('toggled');
  
  if (toggle_button.hasClass('toggled')) {
    toggle_button.after(container);
  } else {
    var el = toggle_button.parent().find('div');
    el.remove();
  }
  
});


function get_container ()
{
  return $('<div/>').css({ 
    width: '100%', height: 'auto', 
    background: 'yellow' 
  }).html('container');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="width:100%;height:auto;background:#000;">
  <button id="toggle-btn">Toggle Button</button>
</div>