jquery - How to Remove all the click handlers in javascript -

i have d3 elements in html page consisting of 'g' elements contain class bubble , structure looks this. when click, event registers , click class added. function recorddata registers event. need remove click events on 'g' elements after 1 iteration not register twice if g element repeated in iteration. how can remove event listeners on 'g' element specially 1 added in through recorddata.

<g id="4119-virtuality" angle="3.7699111843077517" class="bubble" transform="translate(102.63251712643411,493.138632973281)" style="pointer-events: auto; fill: black; font-weight: bold;">    <circle r="52.21875" style="opacity:0"></circle>    <rect rx="5" ry="5" style="fill: rgb(170, 170, 170);" x="-52.21875" y="-45" width="104.4375" height="90"></rect>    <text text-anchor="middle" style="font-size:20" alignment-baseline="middle">      <tspan x="0" y="0">virt</tspan>    </text>  </g>

function recorddata(){    var element = document.getelementsbyclassname("bubble");    for(var = 0; < element.length; i++){      element[i].addeventlistener("click", function(){        var id = this.attributes.id.value;        var index = findwithattr(local_data, "keywordid", id);          if(this.attributes.class.value.split(" ").indexof("clicked") == -1)        {          console.log("clicked");          local_data[index].sub_rel = true; // update sub relevance original array          // store clicked elements temporarily          clicked_elements.push({            id: id,            keyword: local_data[index].keyword,            obj_rel: local_data[index].obj_rel,            sub_rel: local_data[index].sub_rel          })          var bubs = svg.selectall(".contextbubble,.bubble");          var b = bubs[0].filter(function(d) {return d.id === id});          d3.select(b[0]).style("font-weight", "bold");          d3.select(b[0]).classed("clicked", true);          }        else if (this.attributes.class.value.split(" ").indexof("clicked") > -1)        {          console.log("unclicked");          local_data[index].sub_rel = false;           var indx = findwithattr(clicked_elements, "id", id);          clicked_elements.splice(indx, 1);          var bubs = svg.selectall(".contextbubble,.bubble");          var b = bubs[0].filter(function(d) {return d.id === id});          d3.select(b[0]).style("font-weight", "normal");          d3.select(b[0]).classed("clicked", false);        }      }, false);    }  }

remove before adding:

 var recorddata = function() {  var element = document.getelementsbyclassname("bubble");   (var = 0; < element.length; i++) {     element[i].removeeventlistener("click", event);     element[i].addeventlistener("click", event);   } }  var event = function() {    var id = this.attributes.id.value;   var index = findwithattr(local_data, "keywordid", id);    if (this.attributes.class.value.split(" ").indexof("clicked") == -1) {     console.log("clicked");     local_data[index].sub_rel = true; // update sub relevance original array     // store clicked elements temporarily     clicked_elements.push({       id: id,       keyword: local_data[index].keyword,       obj_rel: local_data[index].obj_rel,       sub_rel: local_data[index].sub_rel     })     var bubs = svg.selectall(".contextbubble,.bubble");     var b = bubs[0].filter(function(d) {       return d.id === id     });     d3.select(b[0]).style("font-weight", "bold");     d3.select(b[0]).classed("clicked", true);    } else if (this.attributes.class.value.split(" ").indexof("clicked") > -1) {     console.log("unclicked");     local_data[index].sub_rel = false;     var indx = findwithattr(clicked_elements, "id", id);     clicked_elements.splice(indx, 1);       var bubs = svg.selectall(".contextbubble,.bubble");     var b = bubs[0].filter(function(d) {       return d.id === id     });     d3.select(b[0]).style("font-weight", "normal");     d3.select(b[0]).classed("clicked", false);   }   }