jquery如何动态删除行

Question

我正在使用 jquery1.9 ，我想通过点击add/remove image动态添加或删除一行

下面是最重要的html代码：

<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>

当我点击id为topic_add_course_img的add图片时，添加一个新行，该行有一个delete image，我可以通过点击删除新行。

这是我的代码

$(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);

 });

是的，我得到了我想要的结果，但是我无法通过单击图像来删除一行。 因为即使我给线路一个动态id，我点击图片时也不知道是哪个id？

欢迎任何答案 :)，谢谢。

Answer 1

为您的图像设置一个类并使用：

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

         $(this).remove();

 });

如果你想摆脱父母：

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