如何创建一个从HTML中删除程序代码的按钮？

Question

Here is an example of what I'm trying to do.

Here is the code.

var data = {
labels: ["January", "February"],
datasets: [
    {
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [65, 59, 80, 81, 56, 55, 40]
    },
    {
        label: "My Second dataset",
        fillColor: "rgba(151,187,205,0.2)",
        strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
        data: [28, 48, 40, 19, 86, 27, 90]
    }
]
};

I would like to create two buttons that act as toggles. Each button would correspond to one of the two data sets. So pressing on button one would either remove or bring back the code for the first dataset and same thing for button 2 with the second dataset.

Is this possible?

Answer 1

You want to call a function on your button that takes as parameter the name of your button. This is easily achievable with jQuery, and depending on the name of the button you change the properties of whichever element you want to change.

The same function will be usable for the two buttons and they'll act as toggle since they'll react differently depending on the button name.