How to clear or update the content of an element in a grid in WPF

Question

I have a WPF window with a grid with 2 rows and some columns with text and buttons, then when I click a button the code adds some rows and populates them with random textblocks and images via for loops. For example, the method I call to add a TextBlock with text s in the (i,j) cell of the grid is

public void createTextBlock(int i, int j, string s)
{
        TextBlock tb = new TextBlock();
        //Properties
        tb.Foreground = Brushes.Navy;
        tb.FontFamily = new FontFamily("Century Gothic");
        tb.FontSize = 16;
        tb.FontWeight = FontWeights.UltraBold;
        tb.TextWrapping = TextWrapping.Wrap;
        tb.VerticalAlignment = VerticalAlignment.Center;
        tb.HorizontalAlignment = HorizontalAlignment.Center;
        tb.Text = s;
        //Add to the Grid
        MyGrid.Children.Add(tb);
        Grid.SetRow(tb, i);
        Grid.SetColumn(tb, j);
}

and the method to add an image is similar. The problem is that when I click again, new textblocks and images are added above the old ones and I don't know how to update the content or clear it before adding another.

It is puzzling because the code (before adding rows) checks if the rows are more than 2, and if this is the case it clears all the exceeding rows:

if (MyGrid.RowDefinitions.Count > 2)
{
    MyGrid.RowDefinitions.RemoveRange(2, MyGrid.RowDefinitions.Count-2);
}

but somehow this is not sufficient to clear their content... how can I do it?

EDIT (to clarify):

To add rows I use something like this (a little different because there is a switch call but it does not modify the essence)

public void createGrid(int n)
        {
            //remove rows if present
            if (MyGrid.RowDefinitions.Count > 2)
            {
                MyGrid.RowDefinitions.RemoveRange(2, MyGrid.RowDefinitions.Count-2);
            }
            //permutation  
            int[] permutation = shuffle(deck.Count);            
            for (int i = 2; i < n + 2; i++)
                {
                        RowDefinition row = new RowDefinition();
                        MyGrid.RowDefinitions.Add(row);
                        row.Height = new GridLength(200, GridUnitType.Pixel);
                        //add image
                        createImage(i, 0, deck[permutation[i - 2]].ImmPath);
                        //add textblock in center column with text chosen 
                        //from a jagged array
                        createTextBlock(i, 1, value[0][i-2]);
                        //add textblock in right column
                        createTextBlock(i, 2, deck[permutation[i - 2]].Meaning);
                 }

So the idea is not to add new rows every time but to update the exsisting ones (or add them if needs be, createGrid can be called with different values for n). So I came up with the idea to wipe out the rows exceeding the first 2 (which contains the title and buttons) every time I call that method and add only the needed ones. This is the reason for the first check and RemoveRange.

Answer 1

Assuming you know the row and column of the control you want to remove you could do this

foreach (UIElement control in MyGrid.Children)
{
    if (Grid.GetRow(control) == row && Grid.GetColumn(control) == col)
    {
        MyGrid.Children.Remove(control);
        break;
    }
}

Answer 2

The problem is this

It is puzzling because the code (before adding rows) checks if the rows are more than 2, and if this is the case it clears all the exceeding rows

If you are including items that you want to show below the current items, you need to increase the number of RowDefinitions instead of maintain the same.