html - jQuery click event not working for p tag class -


this question has answer here:

i generating output of options selected drop down list. want allow user 'remove' selections output.

i can't code work though, here code renders output:

 $('#datacombo').change(function(){  $('#dataoutput').html('');  var values = $('#datacombo').val();  for(var = 0; < values.length; += 1) {  $('#dataoutput').append(values[i] + '<p class="removeable">x</p>'+'<br/>')  }}); 

so selected drop down item displayed on page 'x' next in p tags class "removable", generated. i've inspected in chrome , p tag created correct class.

i added code remove clicked option doesnt work:

$('.removeable').click(function(){ $('.removeable').remove(); console.log("i did this");  }); 

the item doesn't removed, don't log in console. idea why wouldnt work?

edit:

i've amended code this:

$('#dataoutput').append('<p class="removeable">' + values[i] + 'x</p>'+'<br/>') 

and indeed remove item, option still 'selected' in drop down box. trying 'unselect' well. i'm using bootstrap , drop down 'multiple' activated. while option removed output, it's not removed select box (meaning when option clicked re-renders removed element).

i've asked question (hopefully) more clearly, in different way duplicated question: unselect option using jquery on bootstrap selectpicker

use event delegation , please use $(this) reference inside of click handler, if dont use that, while clicking on single element results in removing elements class

$("#dataoutput").on('click','.removeable',function(){  $(this).remove();  console.log("i did this");  }); 

and note that, prefer closest static parent delegating events


Comments

Popular posts from this blog

android - Get AccessToken using signpost OAuth without opening a browser (Two legged Oauth) -

org.mockito.exceptions.misusing.InvalidUseOfMatchersException: mockito -

google shop client API returns 400 bad request error while adding an item -