javascript - 通过单击 (x) 按钮元素从列表中删除 DOM 节点

Question

我正在我的页面上动态添加此值。代码是:

      function  favJobs(data){
            number_of_jobs_applied=data.total_bookmarked;
            $('.bookmark-title').append(number_of_jobs_applied," Job Bookmarked");
            for(index=0;index<6;index++){
            var dateString = data.bookmarked_jobs[index].application_deadline;
            var momentObj = moment(dateString, 'YYYY-MM-DD');
            var dateMomentString = momentObj.format('MMM DD, YYYY');
            if (dateMomentString=='Invalid date'){
             var dateMomentString = "n/a";
            }
            var fav_jobs_html = '<div class="job-list" id="'+data.bookmarked_jobs[index].job_id+'">'+
                      '<div class="thumb">'+
                        '<a href="#">'+
                          '<img src="'+data.bookmarked_jobs[index].profile_picture+'" style="max-width:70px"; class="img-fluid" alt="">'+
                        '</a>'+
                      '</div>'+
                      '<div class="body">'+
                        '<div class="content">'+
                          '<h4><a href="/job-detail/'+ data.bookmarked_jobs[index].slug+'">'+data.bookmarked_jobs[index].title+'</a></h4>'+
                          '<div class="info">'+
                            '<span class="company"><a href="#"><i class="fas fa-building" style="margin-right: 5px"></i>'+data.bookmarked_jobs[index].company_name+'</a></span>'+
                            '<span class="office-location"><a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-map-pin"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>'+data.bookmarked_jobs[index].job_location+'</a></span>'+
                            '<span class="job-type full-time"><a href="#"><img style="margin-right: 6px; vertical-align: top; padding-top: 5px;" src="/static/images/img_clock.png" width="12">'+data.bookmarked_jobs[index].employment_status+'</a></span>'+
                          '</div>'+
                        '</div>'+
                        '<div class="more">'+
                          '<div class="buttons">'+
                            '<a href="#" class="button">Apply Now</a>'+
                            '<a href="#" class="favourite"><i data-feather="heart"></i></a>'+
                          '</div>'+
                          '<a href="#"  class="bookmark-remove" onclick="myFunction(this.id)"><i class="fas fa-times"></i></a>'+
                          '<p class="deadline">Deadline:'+dateMomentString+'</p>'+
                        '</div>'+
                      '</div>'+
                   '</div>';

                 $('.bookmark-area').append(fav_jobs_html);
        }

}

我想在单击横截面时删除。但我无法删除它。 -_-

所以我写的是:

function myFunction(e) {
 $(this).parent().remove();
 alert("Deleted");
}

它只是显示已删除警报，但为什么不删除任何内容。

怎么做。请帮忙

Answer 1

您需要将正确this传递给您的myFunction函数。

目前您正在通过:

onclick="myFunction(this.id)"

但是您应该传递对单击的元素的引用，这样您就可以执行以下操作:

onclick="myFunction(this)"

然后:

function myFunction( elm ) {
  $(elm).closest('.job-list').remove()  // safer to use "closest" than "parent"
}

最小演示:

function myFunction(elm){
  $(elm).closest('.job-list').remove()
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class='job-list'>
    <p>item 1</p>
    <div>
      <button onclick="myFunction(this)">&times;</button>
    </div>
  </li>
  <li class='job-list'>
    <p>item 2</p>
    <div>
      <button onclick="myFunction(this)">&times;</button>
    </div>
  </li>
  <li class='job-list'>
    <p>item 3</p>
    <div>
      <button onclick="myFunction(this)">&times;</button>
    </div>
  </li>
</ul>

<小时/>

要调试此类场景，您应该使用 console.log 而不是 alert，然后您可以获得有意义的日志，例如 console.log(this) 来查看 this 是否是您想要的 DOME 节点 还是其他节点。