1

I have a following HTML code:

<div id="image-preview1" class="col-xs-2 ">
 <div id="buttonPlace1"></div>
  <div>
   <label for="image-upload1" id="image-label1">Upload photo</label>
   <input type="file" name="image" id="image-upload1">
  </div>
</div>

and

$('#image-upload1').change(function() {
  $('#buttonPlace1').append("<button id='closeBtn1' onclick='btnRemove1()' class='btn deleteButton'>X</button>");
})

function btnRemove1(){
  $('#buttonPlace1').empty();

}

This works fine. Button is added and removed on click.. But when I remove onclick event from <button> and change btnRemove() to:

$('#closeBtn1').click(function() {
  $('#buttonPlace1').empty();
})

button removing on click stops working. I'm at very beginnig of JS an jQuery and i can't figure it out. Help please >:|

DarekK
  • 83
  • 1
  • 8
  • 2
    Downvoters: Please read https://stackoverflow.blog/2018/04/26/stack-overflow-isnt-very-welcoming-its-time-for-that-to-change/?cb=1 – T.J. Crowder Apr 27 '18 at 09:16
  • Right...sometimes one just doesn't know what to ask for, therefore even if wanted to, it's hard to find answers :| – DarekK Apr 27 '18 at 09:25

1 Answers1

4

1.Since the button is added dynamically so you need to use event-delegation

2.My assumption:- You need to remove uploaded file as well as the button also on click of remove button.(I hope you want like that)

Do like below:-

$(document).on('click','#closeBtn1',function() {
   $('#image-upload1').val('');
   $(this).remove();
});

Working snippet:-

$('#image-upload1').change(function() {
  $('#buttonPlace1').append("<button id='closeBtn1' class='btn deleteButton'>X</button>");
});

$(document).on('click','#closeBtn1',function() {
  $('#image-upload1').val('');
  $(this).remove();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image-preview1" class="col-xs-2 ">
 <div id="buttonPlace1"></div>
  <div>
   <label for="image-upload1" id="image-label1">Upload photo</label>
   <input type="file" name="image" id="image-upload1">
  </div>
</div>
Alive to die - Anant
  • 70,531
  • 10
  • 51
  • 98
  • 1
    @AnkitAgarwal He assigned an event handler to an empty selector, because `#closeBtn1` didn't exist yet. –  Apr 27 '18 at 09:07
  • 1
    Hahaha downvoted just because it's a duplicate - this site really is going to pot – Pete Apr 27 '18 at 09:18
  • 1
    Sorry ALive to Die, I didn't downvote - I just think this site has become downvote first, ask questions later. The link TJ has pasted above sums it up. It has kind of become impossible to get that badge for a good answer on a bad question because people have started to downvote correct answers just because the question is bad – Pete Apr 27 '18 at 09:26
  • @Pete agreed with you :):) – Alive to die - Anant Apr 27 '18 at 09:28
  • 1
    It worked with $(document).on('click', '#closeBtn1', function() { And the reasons of problem are also very understandable for me. Thanks. – DarekK Apr 27 '18 at 09:31
  • 1
    That downvoting for dupes subject is really a thing. This will make SO to be like Polish "elektroda" forum in a moment. #iykwim #pdk – DarekK Apr 27 '18 at 09:37
  • @Alive to Die I've clicked the tick...no worries ;) Thank You. – DarekK Apr 27 '18 at 09:40
  • @DarekK glad to help you :):) – Alive to die - Anant Apr 27 '18 at 09:40
  • 1
    To all of You downvoters...instead of downvote it's just enough passing by (not upvoting) :| In my opinion it's not "such a stupid" question to be downvoted and it's really hard to find correct answers before posting because of different context. – DarekK Apr 27 '18 at 09:43