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
Post a Comment