jquery - jquery如何动态删除行

Question

我使用的是 jquery1.9 ，我想通过单击添加/删除图像动态添加或删除一行

下面是最重要的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图像时，添加一个新行，该行有一个删除图像，我可以单击新行即可将其删除。

这是我的代码

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