单击javascript时的删除按钮

Delete button when it's clicked javascript

本文关键字：删除 按钮 javascript 单击      更新时间：2023-09-26

我有一些代码，当一条线添加到图表时，它会创建一个按钮。单击按钮时，我想从图表中删除线条并删除按钮。可以在此处查看该示例。

也就是说，成功添加按钮的代码是：

function getChartData(option){
    var category = $('#category').val();
    var option = option.value;
    var seriesTitle = category+option;
    $.ajax({
        url: "getData.php?action=getChartData",
        type: "GET",
        dataType:"json",
        data: {
            category:category,
            option:option
        },
        success: function(json){
            chart.addSeries({
                name: seriesTitle,
                data : []
            });
            $.each(json.Data,function(){   
                chart.series[chart.series.length-1].addPoint([parseFloat(this.Year), parseFloat(this[option])]);
            });
        }
    });
    var series = document.createElement('button');   
    series.onclick = function(){
        removeLine(seriesTitle);
    }
    series.setAttribute('id',seriesTitle);
    series.innerHTML=seriesTitle;
    $('#removeLine').append(series);
}

然后，当单击该按钮时，此代码不执行任何操作：

function removeLine(seriesTitle){
    chart.series[seriesTitle].remove();
    $(seriesTitle).remove();
}

错误是：

Uncaught TypeError: Cannot call method 'remove' of undefined
removeLine    oil.js:172
series.onclick

对于任何知道我如何根据变量在高图表中调用特定线的人，都可以获得奖励积分，例如：

chart.series[chart.series.length-1].remove();

这不会：

chart.series[seriesTitle].remove();

当你使用chart.series[something].remove();"某物"必须是你在这里看到的意甲位置。因此，您必须通过参数传递位置。这就是chart.series[0].remove();工作的原因。

因此，如果要解决此问题，可以在删除之前根据标题找到系列位置，如下所示。

function removeLine(seriesTitle){
    for(var postion = 0; position < chart.options.series.length; position++) {
        if(chart.options.series[position].name == seriesTitle) {
            chart.options.series[position].remove();
            break;
        }
    }
}

或

function removeLine(seriesTitle){
    $.each(chart.options.series, function(pos, serie){
        if(serie.name == seriesTitle) {
            chart.series[pos].remove();
        }
    });
}

要在删除按钮时解决问题，您必须添加一个哈希标签，如下所示：

$('#' + seriesTitle).remove();

因此，您的函数将如下所示：

function removeLine(seriesTitle){
    for(var postion = 0; position < chart.options.series.length; position++) {
        if(chart.options.series[position].name == seriesTitle) {
            chart.options.series[position].remove();
            break;
        }
    }
    $('#' + seriesTitle).remove();
}

我认为问题出在行上

        seriesTitle = chart.addSeries({
            name: seriesTitle,
            data : []
        });

seriesTitle这里seriesTitle指的是由 

var seriesTitle = category+option;

并覆盖其值。我猜addSeries正在返回一个对象或undefined. seriesTitle 将使用此值传递给 removeLine，并且您将其用作数组chart.series的键。

尝试删除那里的赋值（看起来你真的不想要它），或者只是用var作为前缀（它将成为匿名函数的本地）。

如果您不确定chart.series的键值对，请将其传递给console.log()，您可以检查它以查看您的键应该是什么样子（以及值是什么）。
相关文章：