I try to delete the object and everything is ok, but when I clicked it throws me to the top of the page. This is not very convenient from the point of view of the interface. How to avoid it?
$( '#upload .change_image').on('click' , function(e){ var del_div = this.parentNode; del_div.remove();}); <div id="upload" class="clearfix"> <div> <div class="step3 step"> <span class="step-name">step 3</span> <div class="top-text clear width-90"> <p>Download picture :</p> </div> <div id="picture_step" style="display: none;"> <div class="column-3"><label>Download picture:</label></div> <div class="column-3 "> <div class="fileUpload" id="uploader"> <span>Push to download a file</span> <input class="input-smaller" accept="image/*" type="file" required="" id="file-select" name="photos[]" aria-required="true"> </div> <div class="error-idea-page"> <label id="file-select-error" class="error" for="file-select">Choose a picture, please.</label> </div> </div> <div class="characters "> <a id="photo" class="popup-with-form work-how video" href="#how-to-take-photo" style="margin-left: 0; float: right; "><span class="how howtowords">How to take a photo correctly?</span></a> </div> </div> <div id="step-preloader"> <img class="" src="http://www.site.com/wp-content/themes/theme/images/preloader.gif" alt="" title=""> </div> <div id="upload" class="clearfix"> <div> <div class="crop"><img src="http://www.site.com/wp-content/uploads/2016/08/2-1-630x423-1.jpg" alt="http://www.site.com/wp-content/uploads/2016/08/2-1-630x423-1.jpg"></div> <a href="#" class="change_image" title="Удалить файл" data-path="/home/fasadtec/site.com/www/wp-content/uploads/2016/08/2-1-630x423-1.jpg"> </a></div> </div> </div> 
href="#"in the <a> tag. - Stepan Kasyanenko