Removing all popover then adding popover, doesn't show

Question

I only want one popover to be opened at a time. So I remove them all and then add a new one, but it doesn't work.

$(document).on("click", ".priority", function() {
    $(".popover").remove();
    $(this).popover({ /* [...] */ });
});

This doesn't show anything like if it was removed after the creation.

JSFiddle

Answer 1

You need to use the method hide, eg popover('hide') :

$(document).on("click", ".priority", function() {
    //this will hide all popovers except the popover associated to the clicked .priorioty
    $(".popover").not(this).popover('hide');
    $(this).popover({ /* [...] */ });
});

see documentation http://getbootstrap.com/javascript/#popovers

Here is a little demo showing how I would do it (differs from yours, btw also the last (deleted) question regarding "pointed"). Cannot quite understand what you are trying to achieve (thinking about the last question especially) - why do you instantiate the popovers on click, so the user has to click twice? Btw, your fiddle never shows a popover!

$('.priority').each(function() {
    $(this).popover({
        title: "Priority value",
        content: '<input id="priorityBox" type="range" min="0" max="100" />',
        container: "#matchRuleForm",
        html: true
    }).on('show.bs.popover', function() {
       $('.priority').not(this).popover('hide');
    });  
}) 

A popover is attached to an element, like .priority - so you should target those elements. .popover is just injected into the DOM temporarily, and cannot be manipulated by the popover methods, like .('show') and .('hide').

demo -> http://jsfiddle.net/4mWE9/ (now the correct link)