Removing a bootstrap popover dynamically using jquery

Question

This following works when a list item is selected and then hovered and a popover is shown. But when I try to remove popover data attributes from list tag, all the tag removes but the popover does not remove. How to remove the popover such that when an item is not selected, the popover is not shown?

/* Latest compiled and minified JavaScript included as External Resource */
// Checked list box items

$(function() {
  $('.list-group.checked-list-box .list-group-item').each(function() {



    // Settings
    var $widget = $(this),
      $checkbox = $('<input type="checkbox" class="hidden" />'),
      color = ($widget.data('color') ? $widget.data('color') : "primary"),
      style = ($widget.data('style') == "button" ? "btn-" : "list-group-item-"),
      settings = {
        on: {
          icon: 'glyphicon glyphicon-check'
        },
        off: {
          icon: 'glyphicon glyphicon-unchecked'
        }
      };

    $widget.css('cursor', 'pointer')
    $widget.append($checkbox);

    // Event Handlers
    $widget.on('click', function() {
      $checkbox.prop('checked', !$checkbox.is(':checked'));
      $checkbox.triggerHandler('change');
      updateDisplay();
    });
    $checkbox.on('change', function() {
      var id = $(this).closest('li').attr('id');
      var isChecked = $checkbox.is(':checked');
      if (isChecked) addPopOver(id);
      else removePopOver(id);
      updateDisplay();
    });

    function addPopOver(id) {
      id = "#" + id;
      $(id).attr('data-toggle', "popover");
      $(id).attr('data-trigger', "hover");
      $(id).attr('data-original-title', $(id).text());
      $(id).attr('data-content', "(No items selected)");
      $('[data-toggle=popover]').popover();
    }

    function removePopOver(id) {
      id = "#" + id;
      $(id).removeAttr("data-toggle");
      $(id).removeAttr("data-trigger");
      $(id).removeAttr("data-original-title");
      $(id).removeAttr("data-content");
    }
    // Actions
    function updateDisplay() {
      var isChecked = $checkbox.is(':checked');

      // Set the button's state
      $widget.data('state', (isChecked) ? "on" : "off");

      // Set the button's icon
      $widget.find('.state-icon')
        .removeClass()
        .addClass('state-icon ' + settings[$widget.data('state')].icon);

      // Update the button's color
      if (isChecked) {
        $widget.addClass(style + color + ' active');
      } else {
        $widget.removeClass(style + color + ' active');
      }
    }

    // Initialization
    function init() {

      if ($widget.data('checked') == true) {
        $checkbox.prop('checked', !$checkbox.is(':checked'));
      }

      updateDisplay();

      // Inject the icon if applicable
      if ($widget.find('.state-icon').length == 0) {
        $widget.prepend('<span class="state-icon ' + settings[$widget.data('state')].icon + '"></span>');
      }
    }
    init();
  });

  $('#get-checked-data').on('click', function(event) {
    event.preventDefault();
    var checkedItems = {},
      counter = 0;
    $("#check-list-box li.active").each(function(idx, li) {
      checkedItems[counter] = $(li).text();
      counter++;
    });
    $('#display-json').html(JSON.stringify(checkedItems, null, '\t'));
  });
});

/* Check Box For item required */

.state-icon {
  left: -5px;
}

.list-group-item-primary {
  color: rgb(255, 255, 255);
  background-color: rgb(66, 139, 202);
}


/* DEMO ONLY - REMOVES UNWANTED MARGIN */

.well .list-group {
  margin-bottom: 0px;
}

.list-inline>li {
  display: inline-block;
  padding-right: 12px;
  padding-left: 20px;
  margin-bottom: 3px;
  font-size: 17px;
}

#check-list-box {
  padding: 10px;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<ul id="check-list-box" class="list-group checked-list-box list-inline ">
  <li class="list-group-item event-item" id="venue" data-color="danger">Venue</li>
  <li class="list-group-item event-item" id="catering" data-color="info">Catering</li>
  <li class="list-group-item event-item" id="desserts" data-color="warning">Desserts</li>
  <li class="list-group-item event-item" id="photographer" data-color="success">Photographer</li>
  <li class="list-group-item event-item" id="bus" data-color="danger">Party buses</li>
  <li class="list-group-item event-item" id="castles" data-color="danger">Bouncy Castles</li>
  <li class="list-group-item" data-color="danger">Other</li>
  <!--<input type="textbox" name ="other" >-->
</ul>

Answer 1

To destroy the shown popover you can use the following code-snippet:

function removePopOver(id) {
      id = "#" + id;
      $(id).popover('dispose'); // JQuery > 4.1
      // $(id).popover('destroy'); // JQuery < 4.1
}

You can also remove all created popovers from your DOM via .popover class (of course each popover has its own id, so by knowing the IDs you can be more precise)

$('.popover').remove();

Answer 2

You could use .popover('destroy').

function removePopOver(id) {
      id = "#" + id;
      $(id).popover('destroy')
}