how can jquery remove row dynamically

Question

I am using jquery1.9 , I want to add or remove a line dynamicly by click the add/remove image

The below is the most important html code:

<ul id="topic_courses_list">
  <li class="section_form_li1">
      <div class="section_form_div1">
          <select id="topic_courses" class="chzn-select" data-placeholder="Please chose a course" style="width:350px;" tabindex="1">
          </select>
      </div>
      <div class="section_form_div1">
          <img id="topic_add_course_img" src="../../imgs/btn_30x22_add.gif"/>
      </div>
   </li>
</ul>

When I click the add image whose id is topic_add_course_img, add a new line and this line have a delete image, which I can remove the new line by click it.

Here's my code

$(document.body).on('click', '#topic_add_course_img', function(){
        var course_name = $("#topic_courses").find("option:selected").text();
        var course_val = $('#topic_courses').val();

        var chtml = '<li class="section_form_li1">' +
         '   <div class="section_form_div1">'+course_name+'&nbsp;' +
         '       <img src="../../imgs/btn_30x22_delete.gif" align="absmiddle" />' +
         '   </div>' +
         '</li>'
         $("#topic_courses_list").append(chtml);

 });

Yeah, I got the results what I want, but I cannot delete a row by click the image. Because even I give the line a dynamic id, I don't know which id is when I click the image?

Any answer is welcom :), Thanks.

Answer 1

Set a class to your image and use:

$(document.body).on('click', '.yourClass', function(){

         $(this).remove();

 });

If you want to get rid of the parent:

$(this).parent().remove();