How to avoid fragment superposition

Question

I'm trying to display a list, using a ListFragment and a custom adapter. Each row includes a TextView and button. It looks like this :

When a button is clicked, I want the element of the list to change. In order to do this, I want to replace the existing ListFragment with another. My problem is that the second fragment is added over the first one, like this :

Here is the code that is executed when I click on a button, in the custom ArrayAdapter :

public void onClick(View view) {
                //Some unrelated stuff

                //I want to replace the old ListGeneratedFragment by a new one
                ListGeneratedFragment fragment = new ListGeneratedFragment();
                ((MainActivity)getContext())
                        .getSupportFragmentManager()
                        .beginTransaction()
                        .replace(R.id.main_list_meals, fragment)
                        .commit();
            }
});

I've already used the same technique in other parts of my code, and it works perfectly. I don't understand why the old fragment isn't replaced here.