Deleting a group from site collection is a very simple and easy task for a SharePoint power user. But when you have to delete more than 1 SharePoint group at a time you have to use power-shell or write  a complex server-side application.

In this article today we will write an application using Rest API  and Jquery which will let user to delete SharePoint groups in SharePoint 2013 or SharePoint Online.

We will focus on following things in the application to make things much easier an intuitive.

1. A text-box which will let us enter the URL of a site collection.
2. A button when clicked will list all the SharePoint groups inside the particular URL.
3. List off all the SharePoint groups in that site collection
4. A button to delete group correspond  to each group displayed.

The Application will look like below

• $.ajax({ url: siteUrl + “/_api/web/sitegroups?$select=LoginName,Id”, method: “GET”, headers: { “Accept”: “application/json; odata=verbose” }, success: function (data) {use the data }});
  • Rest api to display the lists of all groups in the site collection. It displays Group Title, Group Id
  • site url is the url of your site collection
• $.ajax({url: siteurl+”/_api/web/sitegroups/removebyid(‘”+ groupid +”‘)”, method: “POST”, success:function(data){} });
  • Rest api to delete a SharePoint group by ID
  • site URL is the URL of your site collection
• So above listed two are the major rest apis we are using in this application.
• Beside these two we have two other function that we use
  • Confirmation for the delete function using a pop up window
  • Alert a custom message after the group is deleted
• Before jumping on make sure you do use this rest apis URLs in your environment and see what is the result try to parse the result in a json online parser. That way you will have a detailed information and may be you can make this application more better with your own ideas.

Lets start the codes now

Html Code

<div id="divsiteurl">
<input type="text" id="txturl" title="Enter the site url">
<input type="button" id="btnsitegroups" value="Getgroups" title="Display groups from this site collection"></div>
<div id='currentindex'></div>

CSS code

<style type="text/css">
.main{min-height:20px;padding:5px;margin-bottom:5px;color:white;background-color: #0072C6;width:50%;}
div#currentindex {    margin-top: 10px;}
.users a{ color:white;       padding:2px;       text-decoration:underline;       font-weight:normal !important;}
.remove{ font-weight:normal !important;  float:right;}
.grpid{    color: transparent;    width: 0px;    height: 0px;}
.grpid:text{text-decoration:none !important;}
.close {    color: #131212;    font-size: 28px;    font-weight: bold;        top: -5%;    position: absolute;    right: 1%;}
.removegroup {    text-align: right;    text-decoration: underline;    color: #0bfb57;    width: 20%;    float: right;}
.ui-dialog-titlebar {    background: transparent !important;    border: 0px !important;}
a.anchorgroup {    color: #dffb08;    text-decoration:underline;}
#txturl {    width: 350px;}
</style>

Following source links are added

• <link rel=”stylesheet”href=”https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css&#8221; />
• <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js “/>
• <script src=”https://code.jquery.com/ui/1.11.1/jquery-ui.min.js”/>
• <script src=”/_layouts/15/SP.RequestExecutor.js”/>

JavaScript Code

<script type="text/javascript">
$(document).ready(function () {
$('#btnsitegroups').click(function(){
var siteUrl= $('#txturl').val(); //read the textbox for the site url
//get the lists of groups in that site collection
$.ajax({
      url: siteUrl + "/_api/web/sitegroups?$select=LoginName,Id,OwnerTitle", method: "GET",
      headers: { "Accept": "application/json; odata=verbose" },
      success: function (data) {
             $.each(data.d.results, function() {
             //append the each groups result to the html element with group name hyperlinked to group settings page
             // add a link that will allow user to delete the group
              $("#currentindex").append("


<div class='main'>


<div><a title='Go to group settings page' class='anchorgroup' href=/_layouts/15/people.aspx?MembershipGroupId="+this.Id+"><b>"+this.LoginName+"</b></a>


<div title='Delete this group entierly from the site collection' data-groupname='"+ this.LoginName+"' data-gid='"+this.Id+"'  class='removegroup'>Remove Group</div>


</div>


</div>


");
             });
             },
     error: function(err)
         {
             // alert any error if there is
            alertbox("error: " + JSON.stringify(err));
         }
    });
});
//End function that loads all the groups inside a particular site collection
 // calling the function to  remove the group from site collection
 $(document).on('click', '.removegroup', function(){
          var groupid= $(this).data('gid');
          var groupname= $(this).data('groupname');
          var msg= "Are you sure you want to remove group name <b style='text-align:center'>"+groupname + "</b>";

          confirmation(msg).then(function (answer){
          var ansbool = Boolean.parse(answer.toString());
          if(ansbool){ deltegroup(groupid,siteUrl,groupname); }
            });
    });
   //end function to delete remove the group from site collection

  //this is document.ready end

});  

 /* Declaring the function that removes the group from the site collection or deltes it */
 function deltegroup(groupid,siteurl,groupname){
    var executor;
    executor = new SP.RequestExecutor(siteurl);
    executor.executeAsync({
    url: siteurl+"/_api/web/sitegroups/removebyid('"+ groupid +"')",
    method: "POST",
    success:function(data){
     var message="<b>"+groupname+"</b>   has been removed from the site collection";
     alertbox(message);
      },
     error: function(err){ alert(JSON.stringify(err)); }
   });
}
//end function to remove the group

// function that pops up a dialog for confirmation of the group deletion
function confirmation(question) {
    var defer = $.Deferred();
    $('


<div></div>


')
        .html(question)
        .dialog({
            autoOpen: true,
            modal: true,
            title: '',
            buttons: {
                "Yes": function () {
                  defer.resolve("true"); //this text 'true' can be anything. But for this usage, it should be true or false.
                   $(this).dialog("close");
                },
                "No": function () {
                   defer.resolve("false"); //this text 'false' can be anything. But for this usage, it should be true or false.
                   $(this).dialog("close");
                    }
          },
           close: function () {
               $(this).remove();
           }
   });
  return defer.promise();
}
//end dialog for confirmation

//dialog for an alert box use Jquery to display a nice alert box
function alertbox(message){
      $('


<div></div>


')
       .html(message)
       .dialog({
       autoOpen: true,
        modal: true,
        title: '',
       buttons: {
          "Ok": function () {
            $(this).dialog("close");
                }
              },
           close: function () {
            $(this).remove();
            }
        });
}
 // end dialog for an alert. 

</script>

Once you have all these codes together then you can use these in a HTML page or make an app out of it and deploy to your SharePoint framework.

I usually write all these codes in a html page and upload it to a SharePoint document library.

Then add a page give it a name that reflects the application action.

Edit the page and add content editor webpart, in the web part text link property link to the html file just created and uploaded.

Following images takes you through the visual  application process

Here you go.

Thanks for reading.