Remove widget from Gtk.FlowBox - gtk

Question

I'm trying to remove a Widget from a Gtk.FlowBox by destroying the widget, however there is a gray box left in place. Any idea how I can remove the gray box so that the adjacent widget falls into place after the removal of the widget.
The following is how the widgets are packed:
1- Two Images(from pixbuf) and Label are added to a OverlayImage
2- Overlay Image is added to a EventBox
3- EventBox is added to the FlowBox
I have tried the following methods:
1- Destroy the EventBox
2- Obtain and destroy all children of Overlay Image and then destroy OverLay Image and EventBox
In both case, the widget is removed but a empty area stays in its place which is grey when clicked, but does nothing - see picture.
How do I remove this empty space, so that the next widget automatically falls into the place where the widget was removed and the next widget falls into its place and so on.
The code is available here and the "removeSelectedBooksFromLibrary" is the method which is removing the EventBox selected by the user from the FlowBox
This is the code to add widgets from the FlowBox
https://github.com/babluboy/bookworm/blob/master/src/bookworm.vala#L589
This is the code to remove widgets from the FlowBox
https://github.com/babluboy/bookworm/blob/master/src/bookworm.vala#L512
Thanks in advance
Here is a working example with the solution added, which removes the widget and its parent.
public class FlowBoxIssue : Gtk.Window {
public static int main (string[] args) {
Gtk.init (ref args);
FlowBoxIssue window = new FlowBoxIssue();
window.show_all ();
Gtk.main ();
return 0;
}
public FlowBoxIssue () {
this.title = "FlowBox Issue";
this.window_position = Gtk.WindowPosition.CENTER;
this.destroy.connect (Gtk.main_quit);
this.set_default_size (800, 600);
Gtk.FlowBox library_flowbox = new Gtk.FlowBox();
Gtk.Box library_mainbox = new Gtk.Box (Gtk.Orientation.VERTICAL, 20);
Gtk.ScrolledWindow library_scroll = new Gtk.ScrolledWindow (null, null);
library_scroll.set_policy (Gtk.PolicyType.AUTOMATIC, Gtk.PolicyType.AUTOMATIC);
library_scroll.add (library_flowbox);
Gtk.Overlay aOverlayImage1 = new Gtk.Overlay();
Gtk.EventBox aEventBox1 = new Gtk.EventBox();
Gtk.EventBox aEventBox2 = new Gtk.EventBox();
Gtk.EventBox aEventBox3 = new Gtk.EventBox();
try{
Gdk.Pixbuf aBookCover1 = new Gdk.Pixbuf.from_file_at_scale("cover.png", 200, 250, false);
Gtk.Image aCoverImage1 = new Gtk.Image.from_pixbuf(aBookCover1);
aOverlayImage1.add(aCoverImage1);
Gtk.Label overlayTextLabel1 = new Gtk.Label("Label 1");
aOverlayImage1.add_overlay(overlayTextLabel1);
aEventBox1.add(aOverlayImage1);
library_flowbox.add (aEventBox1);
}catch(Error e){
}
Gtk.Overlay aOverlayImage2 = new Gtk.Overlay();
try{
Gdk.Pixbuf aBookCover2 = new Gdk.Pixbuf.from_file_at_scale("cover.png", 200, 250, false);
Gtk.Image aCoverImage2 = new Gtk.Image.from_pixbuf(aBookCover2);
aOverlayImage2.add(aCoverImage2);
Gtk.Label overlayTextLabel2 = new Gtk.Label("Label 2");
aOverlayImage2.add_overlay(overlayTextLabel2);
aEventBox2.add(aOverlayImage2);
library_flowbox.add (aEventBox2);
}catch(Error e){
}
Gtk.Overlay aOverlayImage3 = new Gtk.Overlay();
try{
Gdk.Pixbuf aBookCover3 = new Gdk.Pixbuf.from_file_at_scale("cover.png", 200, 250, false);
Gtk.Image aCoverImage3 = new Gtk.Image.from_pixbuf(aBookCover3);
aOverlayImage3.add(aCoverImage3);
Gtk.Label overlayTextLabel3 = new Gtk.Label("Label 3");
aOverlayImage3.add_overlay(overlayTextLabel3);
aEventBox3.add(aOverlayImage3);
library_flowbox.add (aEventBox3);
}catch(Error e){
}
Gtk.Button delete_button = new Gtk.Button.with_label("Delete Pix");
delete_button.clicked.connect (() => {
//This is the line which resolved the issue - get the parent of the widget and destroy it and then destroy the widget
aEventBox2.get_parent().destroy();
aEventBox2.destroy();
});
library_mainbox.pack_start(library_scroll, true, true, 0);
library_mainbox.pack_end(delete_button, true, false, 0);
this.add(library_mainbox);
}
}

Answer 1

Every time you add a child widget to a GtkFlowBox, the flow box widget will add an implicit child widget in between, for event handling and styling purposes — as the documentation for GtkFlowBox states:
Although a GtkFlowBox must have only GtkFlowBoxChild children, you can add any kind of widget to it via gtk_container_add(), and a GtkFlowBoxChild widget will automatically be inserted between the box and the widget.
This means that the line:
library_grid.add(aEventBox);
is really equivalent to:
var flowbox_child = new Gtk.FlowBoxChild();
flowbox_child.add(aEventBox);
library_grid.add(flowbox_child);
If you want to remove a widget from a GtkFlowBox and you only keep a reference to the child you added, you will need to retrieve its parent and remove that from the GtkFlowBox:
aEventBox.get_parent().destroy();
// or
library_grid.remove(aEventBox.get_parent());