Q:

hide element on click error "unrecognized expression"? 

I'm trying to hide some element when click on this element(option value for categoryfilter on Google Chart)
<div class="goog-menuitem goog-option" role="menuitemradio" aria-checked="false" style="user-select: none;" id=":4">Middle East</div>

and
<div class="goog-menuitem goog-option" role="menuitemradio" aria-checked="false" style="user-select: none;" id=":0" aria-hidden="false"><div class="goog-menuitem-content" style="user-select: none;"><div class="goog-menuitem-checkbox" style="user-select: none;"></div>Africa</div></div>

So I wrote this code

google.visualization.events.addListener(namePicker, 'statechange', hidediv);

function hidediv() {

  $("#:0.goog-menuitem.goog-option").click(function() {

    document.getElementById('2000').hide();
    document.getElementById('2010').hide();
    document.getElementById('2017').hide();

  });

  $("#:4.goog-menuitem.goog-option").click(function() {
    document.getElementById('2000').hide();
    document.getElementById('2010').hide();
    document.getElementById('2017').hide();

  });

}

but I got an error

Syntax error, unrecognized expression: #:0.goog-menuitem.goog-option

Runnable Snippet

<html>

<head>

  <link rel="stylesheet" href="styles_timeline.css">
</head>

<body width="880">
  <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
    google.charts.load('current', {
      'packages': ['corechart', 'controls']
    });

    google.charts.setOnLoadCallback(drawRegionsMap);



    function drawRegionsMap() {

      var query1 = new google.visualization. Query("https://docs.google.com/spreadsheets/d/1sOyYwL51uWTd7Pv4Sp_bKdxWmH-g6QA2SDHhw93_2s8/edit?usp=sharing");
      //all
      query1.setQuery('select * where J="Take back policy model" order by F,Y,M,N,L');
      query1.send(drawDashboard);
    }

    function drawDashboard(response1) {

      var data1 = response1.getDataTable();

      //set year that<2000 to 2000
      for (i = 0; i < data1.getNumberOfRows(); i++) {

        var startdate = new Date(data1.getValue(i, 12));


        var y = startdate.getFullYear();



        if (y < 2000) {

          r = data1.getValue(i, 12);

          //console.log(i);

          startdate.setFullYear(2000);

          data1.setValue(i, 12, startdate);



        }

      }

      //set start date to previous row end date - groupByRowLabel

      for (var row = 1; row < data1.getNumberOfRows(); row++) {

        if (data1.getValue(row - 1, 5) == data1.getValue(row, 5) && data1.getValue(row - 1, 6) == data1.getValue(row, 6)) { //if the previous one has the same label   

          if (data1.getValue(row - 1, 13) > data1.getValue(row, 12)) { // if the previous end date is greater than the start date of current row
            data1.setValue(row - 1, 13, data1.getValue(row, 12)) // set the previous end date to the start date of current row
          }
        }
      }







      var view1 = new google.visualization. DataView(data1);
      view1.setColumns([
        //index column 0
        {
          type: 'string',
          id: 'Country',
          calc: function(dt, row) {
            //return countryname statename - policies // USA New York - WEEE
            return dt.getFormattedValue(row, 5) + " " + dt.getFormattedValue(row, 22) + " - " + dt.getFormattedValue(row, 6)
          }
        },
        //index column 1

        {
          type: 'string',
          id: 'region',
          calc: function(dt, row) {
            return dt.getFormattedValue(row, 8)
          }
        }
        //index column 2
        , {
          type: 'string',
          role: 'tooltip',
          properties: {
            html: true
          },
          calc: function(dt, row) {
            var country = dt.getFormattedValue(row, 5)
            var policy = dt.getFormattedValue(row, 6)
            var dataname = dt.getFormattedValue(row, 8)
            var dropname = dt.getFormattedValue(row, 11)
            var formatter = new google.visualization. DateFormat({
              pattern: "MMMM yyyy"
            });
            var startdate = formatter.formatValue(dt.getValue(row, 12));
            //var startdate = dt.getFormattedValue(row, 12)
            var comment = dt.getFormattedValue(row, 15)
            //colorValues.push(dt.getFormattedValue(row, 6))
            return '<br><div id="country">' + country + " - " + policy + '<br><br></div> ' +
              '<div id="header1">Dominant (E)PR policy model:<br></div>' +
              '<div id="dropname">' + dropname + '<br><br></div>' +
              '<div id ="header2">Since :&nbsp;</div><div id="date">' + startdate + " " + 'to current</div><br><br><br>' +
              '<div id ="comment">' + comment + '<\/div>'
          }
        },
        //style role
        {
          type: 'string',
          id: 'color',
          role: 'style',
          calc: function(dt, row) {
            return dt.getFormattedValue(row, 25)
          }
        },


        //index column 3,4 start-enddate
        12, 13,

      ]);



      var chart1 = new google.visualization. ChartWrapper({
        chartType: 'Timeline',
        //dataTable: 'data1',
        containerId: 'colormap1',
        options: {
          width: 870,
          height: 800,
          //colors: colorValues,

          timeline: {
            groupByRowLabel: true,
            rowLabelStyle: {
              fontSize: 14,
              width: 800,

            },
            showBarLabels: false
          },
          hAxis: {
            minValue: new Date(2010, 0, 0),
            maxValue: new Date(2017, 0, 0)
          },
          tooltip: {
            isHtml: true
          },
        }


      });


      var namePicker = new google.visualization. ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'filter_div',
        'options': {
          'filterColumnIndex': '1',
          'ui': {
            'labelStacking': 'vertical',
            'caption': 'Choose a Region',
            'cssClass': 'filter',
            'selectedValuesLayout': 'aside',
            'allowTyping': false,
            'allowMultiple': true
          }
        }
      });


      // Create a dashboard. 
      var dashboard = new google.visualization. Dashboard(
        document.getElementById('dashboard_div'));




      // Establish dependencies, declaring that 'filter' drives 'pieChart',
      // so that the pie chart will only display entries that are let through
      // given the chosen slider range. 
      dashboard.bind(namePicker, chart1);
      // Draw the dashboard. 
      dashboard.draw(view1);


      google.visualization.events.addListener(chart1, 'ready', function() {
        var svgParent = colormap1.getElementsByTagName('svg')[0];

        svgParent.parentNode.style.top = '40px';

        Array.prototype.forEach.call(colormap1.getElementsByTagName('text'), function(text) {
          if ((text.getAttribute('text-anchor') === 'end') &&
            (parseFloat(text.getAttribute('x')) < 200)) {
            text.setAttribute("x", "5");
            text.setAttribute("text-anchor", "start");
          }


          if ((text.getAttribute('text-anchor') === 'middle') && (parseFloat(text.getAttribute('x')) < 850)) {

            var groupLabel = text.cloneNode(true);
            groupLabel.setAttribute('x', '850');
            groupLabel.innerHTML = '2017';
            groupLabel.setAttribute('y', '971.05');
            groupLabel.setAttribute('font-family', 'Arial');
            groupLabel.setAttribute('font-size', '13');
            svgParent.appendChild(groupLabel);



          }


        })



      })
      google.visualization.events.addListener(chart1, 'select', tableSelectHandler);


      function tableSelectHandler() {
        var selection = chart1.getChart().getSelection()[0];
        var chartDataView = chart1.getDataTable();
        var rowindex = chartDataView.getTableRowIndex(selection.row);
        var cnid = data1.getValue(rowindex, 0);
        var polid = data1.getValue(rowindex, 1);
        var strid = data1.getValue(rowindex, 2);
        //var sid = (strid) - 1;

        var statecode = data1.getValue(rowindex, 4);

        //if (selection.length > 0) {
        //http://www.sagisepr.com/country.php?country=21&polsel=1&sid=17&statecode=AR
        window.open("http://www.sagisepr.com/country.php?country=" + cnid + "&polsel=" + polid + "&sid=" + strid + "&statecode=" + statecode);
        //}
      }
      google.visualization.events.addListener(namePicker, 'statechange', hidediv);

      function hidediv() {


        $("#:0.goog-menuitem.goog-option").click(function() {

          document.getElementById('2000').hide();
          document.getElementById('2010').hide();
          document.getElementById('2017').hide();

        });

        $("#:4.goog-menuitem.goog-option").click(function() {
          document.getElementById('2000').hide();
          document.getElementById('2010').hide();
          document.getElementById('2017').hide();

        });

      }


    }
  </script>
  <div id="dashboard_div">

    <div id="2000" style="z-index:1;position: fixed;top: 70px;left: 168px;font-family: Arial;font-size: 13;color:red;">2000</div>

    <div id="2010" style="z-index:1;position: fixed;top: 70px;left: 556px;font-family: Arial;font-size: 13;color:red;">2010</div>

    <div id="2017" style="z-index:1;position: fixed;top: 70px;left: 850px;font-family: Arial;font-size: 13;color:red;">2017</div>


    <div id="filter_div"></div>
    <! --chart_div!-->
    <div id='colormap1' style="position:fixed;">

    </div>
  </div>
</body>

</html>

anyone know how to make this works?  thank you. 

A:

According to How do I select an element by an ID that has characters used in CSS notation?  you need to write:
$("#\\:0.goog-menuitem.goog-option")

