通过单击（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

我会去：

function myFunction(e) {
 $(this).closest('.job-list').remove();
 alert("Deleted");
}

[您必须检查click事件的位置（单击了哪个DOM元素），然后向上移动直到到达主容器（例如job-list）。希望对您有所帮助，我确实正确阅读了HTML。

Answer 2

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

当前您正在通过：

onclick="myFunction(this.id)"

但是您应该传递对所单击元素的引用，因此可以这样做：

onclick="myFunction(this)"

然后：

function myFunction( elm ) {
  $(elm ).parent().remove()
}

---

要调试这种情况，您应该使用console.log而不是alert，然后可能会有有意义的日志，例如console.log(this)，以查看this是否是您想要的DOME node。其他的东西。

Answer 3

我认为您想在job-list链接上单击删除整个bookmark-remove类div。为此，您可以改用.closest()方法。

首先，像这样更新您的HTML字符串：

.closest()

因此，在这里传递传递'<a href="#" class="bookmark-remove" onclick="myFunction(this)"><i class="fas fa-times"></i></a>'+ 时，我们希望将当前dom元素传递给clcik事件处理程序，例如this.id，然后更新函数，例如：

myFunction(this)