jQuery: Add and Remove Class on Click with Outside Click Handling

You can achieve this by using the click event in jQuery. Here's an example of how you can add and remove a class based on the click event:

$(document).on('click', function(event) {
  var $target = $(event.target);
  
  if (!$target.hasClass('xdi') && !$target.closest('.xdi').length) {
    $('.addclass').removeClass('addclass');
  } else {
    $('.xdi').removeClass('addclass');
    $target.closest('.xdi').addClass('addclass');
  }
});

In this example, the event handler is attached to the document element so that it captures all clicks on the page. Inside the event handler, we check if the clicked element does not have the class 'xdi' and if it is not a descendant of an element with the class 'xdi'. If this condition is true, we remove the 'addclass' from all elements with that class. Otherwise, we remove the 'addclass' from all elements with the class 'xdi' and add it to the closest ancestor with the class 'xdi' of the clicked element.

Make sure to replace 'xdi' with the actual class name you are using for your elements.