Removing items from ListView strange behaviour

Question

I am working with a ListView. Adding a new item to a ListView is easy, but how to remove one?

I build my ListView this way :

public Node buildListView() {
        ObservableList<String> myList =  FXCollections.observableArrayList();
        int counter = 0;
        for(int i=0; i<10; i++) {
            myList.add("Number " + new Integer(i+1).toString());
        }
        ListView<String> listView = new ListView<>();
        listView.setItems(myList);

        listView.setCellFactory(new Callback<ListView<String>, ListCell<String>> (){
            @Override
        public ListCell<String> call(ListView<String> arg0) {
                return new listcells.ListcellY(listView);

            }

        });
        return listView;
}

An instance of ListcellY sets a label in setGraphics. To remove the String associated to it from my ObservableList I add a MouseEvent handler :

public class ListcellY extends ListCell<String> {
    Label label;
    HBox hbox;
    ListView<String> listView;

    public ListcellY( ListView<String> listView ) {
        super();
        this.listView = listView; // Here I pass the reference to my list. Is it a gd way to do that? 
    }
    @Override
    protected void updateItem(String item, boolean empty) {
        super.updateItem(item, empty);
        if(item!=null){
            label = new Label(item);

            label.addEventHandler(MouseEvent.MOUSE_CLICKED, e -> { 
                System.out.println("CLicked on : " + item);
                for(String s : listView.getItems()) {
                    System.out.println("  " + s);
                }

                listView.getItems().remove(item);  // Here I remove the item form my list.
                System.out.println("list size : " + listView.getItems().size());
            });
            setGraphic(label);

        } 

    }
}

While this code works by removing each clicked item from my ObservableList, the listView is acting strangely. Each time a label is clicked, it successully disappears from my ListView, however a new item is automatically added at the end of that ListView, baring the name of the last label's text (but it is not a clickable label). It keeps repeating until my ObservableList is empty. Then the ListView does not show anything.

I simply want my clicked labels to disappear, without getting any new "visual copy" in my TreeView. It is s if an index parameter is set to the original size of my ObservableList, then the ListView copies the last element until it gets the right number of elements. But I don't understand how it is done.

What can I do, what's going on in the first place?

Answer 1

Okay, seems like writing your issues makes your brain work better! I got the right intuition : In my extending ListCell class, I check in the overriden update method whether my item is not null. but I don't handle the case when it is null, in which case I have to set the graphics to null! I still don't understand why exactly, but it works! Here is the updated class :

public class ListcellY extends ListCell<String> {
    Label label;
    HBox hbox;
    ListView<String> listView;

    public ListcellY( ListView<String> listView ) {
        super();
        this.listView = listView; // Here I pass the reference to my list. Is it a gd way to do that? 
    }
    @Override
    protected void updateItem(String item, boolean empty) {
        super.updateItem(item, empty);
        if(item!=null){
            label = new Label(item);

            label.addEventHandler(MouseEvent.MOUSE_CLICKED, e -> { 
                System.out.println("CLicked on : " + item);
                for(String s : listView.getItems()) {
                    System.out.println("  " + s);
                }

                listView.getItems().remove(item);  // Here I remove the item form my list.
                System.out.println("list size : " + listView.getItems().size());
            });
            setGraphic(label);

        }
        else {
            setGraphics(null);
        } 

    }
}