How to Remove a dynamically created item from Column QML Element

Question

[EDIT]: I want to remove some controls which are created in Column QML type dynamically and also how to access the children of a layout? .Following is the code which is not dynamic and is just for reference:

import QtQuick 2.6
import QtQuick.controls 2.2

Item
{
Column {
    id:col
    spacing: 2

    //Initially Adding controls.
    Rectangle { color: "red"; width: 50; height: 50 }
    Rectangle { color: "green"; width: 20; height: 50 }
    Rectangle { color: "blue"; width: 50; height: 20 }
}

Button
{
    id:button
    onClicked: 
    {
        //How to remove a perticular element from above column which is created dynamically?
    }

 }

  // [EDIT] - Code to add controls dynamically to column.
}

Possible duplicate of [Delete children of QML Grid](https://stackoverflow.com/questions/8851164/delete-children-of-qml-grid) — m7913d, Jul 29 '17 at 11:25
I'd usually suggest to go for a data-driven approach (`Repeater`, etc.) rather than building and destroying elements manually. — peppe, Jul 29 '17 at 14:22
@m7913d you should never rely on the garbage collector. It will only work relieably when you use `component.createObject(null)` and then it will relieably destroy your object at random times, most likely before you want it to be gone, as the reference counting is broken. If it runs to seldomly your application will crash as soon as it runs. If you use `component.createObject(someParent)` it won't work at all. Then it is your responsbility to destroy it with `instance.destroy()`. For the aforementioned reasons, this is the only reasonable way to deal with dynamic instantiation from JS. — derM - not here for BOT dreams, Jul 31 '17 at 07:06
@derM Thanks for highlighting this. I removed my comments because they were written in the assumptions the items were created statically. — m7913d, Jul 31 '17 at 07:38

Praveen Kumar · Accepted Answer · 2017-07-31T05:59:49.033

3

//How to remove perticular element from above column ?

Use the below mentioned code [Reference: https://stackoverflow.com/a/8852535/3459185]:

col.children[index_to_destroy].destroy()

[EDIT] Sample code to add and delete elements dynamically in a column:

Item
{
    ListModel {
        id: elementModel
        ListElement { elementColor: "red"; elementWidth: 50; elementHeight: 50}
        ListElement { elementColor: "green"; elementWidth: 20; elementHeight: 50}
        ListElement { elementColor: "blue"; elementWidth: 50; elementHeight: 20}
    }

    Column {
        id:col
        spacing: 2
        Repeater {
            model: elementModel
            Rectangle { color: elementColor; width: elementWidth; height: elementHeight }
        }
    }

    Button
    {
        id: deleteButton; x: 200; y: 200; height: 50; width: 50; text: "Delete"
        onClicked:
        {
            //How to remove perticular element from above column ?
            elementModel.remove(index)
        }
    }

    Button
    {
        id: addButton; x: 400; y: 200; height: 50; width: 50; text: "Add"
        onClicked:
        {
            // Code to add controls dynamically to column.
            elementModel.insert(index, { "elementColor": "red", "elementWidth": 50, "elementHeight": 50})
        }

    }
}

edited Jul 31 '17 at 05:59

answered Jul 29 '17 at 10:31

Praveen Kumar

483
1
5
12

@m7913d - for something that is "not allowed" it seem to work pretty well thou – dtech Jul 30 '17 at 12:23
@dtech If you do not follow the documentation, it may (seem to) work now, but there is no guaranty that it will work in the future. (Note that [Atron's answer](https://stackoverflow.com/a/32047782/7621674) is irrelevant now as the OP has specified that he uses dynamically created objects.) – m7913d Jul 30 '17 at 12:39
1

I work on a project that relies extensively on modifying and even removing objects that are instantiated via declarative code, and done tons of testing of this, with no evident issues. There is also the possibility the documentation is wrong, or maybe targets specific cases without mentioning them. Remember that documentation is not "absolute divine truth" and it is just as subject to bugs as every other code. In fact, Qt 5 documentation was horrendously buggy up until version 5.4 or so. – dtech Jul 30 '17 at 12:41
I think a potential issue might stem from referencing objects via ids and then dynamically removing those objects. At any rate, it has got to be something rather specific, and obviously prone to failure. – dtech Jul 30 '17 at 12:45
@dtech Maybe, it is a good idea to fill in a bug report (to correct/clarify the documentation) using https://bugreports.qt.io/. – m7913d Jul 30 '17 at 12:53

How to Remove a dynamically created item from Column QML Element

1 Answers1