javascript - Using data-attr to identify an active selection -

i'll try keep @ simple can.

i have json object pulled via ajax. displaying list of icons in main div data dynamically can toggled on or off.

i have secondary div selected items appearing, while main div icon receives class of active.

i want end user able remove of them clicking on them on either main div or secondary div.

most of working, i'm having trouble figuring out best way map them have 2 separate click events can control same outcome.

i think may have fact i'm dynamically creating elements... create more elements... have alter initial elements.

my structure far map current selection inside of array. gives me control on keeping code-based list of selected (there more data in example i'll providing).

so, here how have far:

html:

<div id="options"></div> <div id="selectedoptions"></div> 

javascript/jquery:

// simple simulated ajax data var ourdata = {   "color1": "yellow",   "color2": "blue" }; var $options = $('#options'); var $selectedoptions = $('#selectedoptions'); // array keep track of objects selected var selectedoptions = [];  // makes initial option dynamic list makeoptions(ourdata, $options);  // if option main div clicked, handle class changing $('button').on('click', function(){     pickoption($(this)); });  /* function problem. option gets removed array, , secondary div, class of active still occurs on main div. */ $selectedoptions.on('click', '.optionactive', function(){   var option = $(this).data('color');   var optionposition = jquery.inarray(option, selectedoptions);   selectedoptions.splice(optionposition, 1);   displayoptions(selectedoptions, $selectedoptions); });  // creates initial icons (buttons in case) dom , applies data-attribute color function makeoptions(options, $container){     var $results = $('<div id="results">');   $.each(options, function(key, value){     var $optionbutton = $('<button>' + key + ':' + value + '</button>');     $optionbutton.data('color', value);     $results.append($optionbutton);   });   $container.append($results); }  /* handler selecting option main div. handling class active. not using simple classtoggle because there many situations click not allowed */ function pickoption($option){   var selectedoption = $option.data('color');   // if option returns true, or doesn't exist yet   if(modifyoptions(selectedoption, selectedoptions)){     $option.addclass('active');   } else {     $option.removeclass('active');   }   // recreate our current selected options   displayoptions(selectedoptions, $selectedoptions); }  /* searches array see if option exists. returns true or false , either pushes or splices option array */ function modifyoptions(option){   var optionposition = jquery.inarray(option, selectedoptions);   if(optionposition == -1){     selectedoptions.push(option);     return true;   } else {     selectedoptions.splice(optionposition, 1);     return false;   } }  /* displays selected options exist in our array */ function displayoptions(selectedoptions, $container){   $container.empty();   $.each(selectedoptions, function(option, value){     var $optiontile = $('<div class="optionactive">');     $optiontile.data('color', value)                           .text(option + ":" + value)                 .css('background', value);     $container.append($optiontile);   }); } 

so, summarize, want some way remove .active class main div equivalent element when item second div clicked.

i tried removing class active searching elements data-color=data-color of selected item, couldn't work.

ex:

$('*[data-color="' + $(this).data('color') + '"]').removeclass('active'); 

i data approach this, such removing class active if had data-color="yellow" instance.

playground: https://jsfiddle.net/c75xclha/

edit:

both selected, working designed:

clicked yellow div. yellow button still active:

should remove active class button when yellow div or button pressed, shown here:

you assigning data-* property using .data(prop), not attribute hence element having data-* property not accessed/selected using attribute-selector, assign attribute using .attr('data-color') instead of .data(property)

---

attribute equals selector [name=”value”], selects elements have specified attribute value equal value.

.data( key, value ), store arbitrary data associated matched elements.

when use .data() update data value, updating internal object managed jquery, not updated in data-* attribute[ref]

---

// simple simulated ajax data  var ourdata = {    "color1": "yellow",    "color2": "blue"  };  var $options = $('#options');  var $selectedoptions = $('#selectedoptions');  // array keep track of objects selected  var selectedoptions = [];    // makes initial option dynamic list  makeoptions(ourdata, $options);    // if option main div clicked, handle class changing  $('button').on('click', function() {    pickoption($(this));  });    /* function problem. option gets removed array, , secondary div, class of active still occurs on main div. */  $selectedoptions.on('click', '.optionactive', function() {    var option = $(this).data('color');    var optionposition = jquery.inarray(option, selectedoptions);    selectedoptions.splice(optionposition, 1);    $('[data-color="' + $(this).data('color') + '"]').removeclass('active');    displayoptions(selectedoptions, $selectedoptions);  });    // creates initial icons (buttons in case) dom , applies data-attribute color  function makeoptions(options, $container) {    var $results = $('<div id="results">');    $.each(options, function(key, value) {      var $optionbutton = $('<button>' + key + ':' + value + '</button>');      $optionbutton.attr('data-color', value);      //___________^^^^^^^^^^^^^^^^^^little trick here!      $results.append($optionbutton);    });    $container.append($results);  }    /* handler selecting option main div. handling class active.  not using simple classtoggle because there many situations click not allowed */  function pickoption($option) {    var selectedoption = $option.data('color');    // if option returns true, or doesn't exist yet    if (modifyoptions(selectedoption, selectedoptions)) {      $option.addclass('active');    } else {      $option.removeclass('active');    }      // recreate our current selected options    displayoptions(selectedoptions, $selectedoptions);  }    /* searches array see if option exists. returns true or false , either pushes or splices option array */  function modifyoptions(option) {    var optionposition = jquery.inarray(option, selectedoptions);    if (optionposition == -1) {      selectedoptions.push(option);      return true;    } else {      selectedoptions.splice(optionposition, 1);      return false;    }  }    /* displays selected options exist in our array */  function displayoptions(selectedoptions, $container) {    $container.empty();    $.each(selectedoptions, function(option, value) {      var $optiontile = $('<div class="optionactive">');      $optiontile.data('color', value)        .text(option + ":" + value)        .css('background', value);      $container.append($optiontile);    });  }

.active {    background: #ccf;  }  .optionactive {    min-width: 100px;    min-height: 100px;    display: inline-block;    margin: 1em;    background: #eee;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>  <div id="options"></div>  <div id="selectedoptions"></div>

updated fiddle

edit: if still want stick .data method, use .filter select target element.

$('button').filter(function(){   return $(this).data('color')=='yellow'; }).removeclass('active');