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

Question

I am dynamically adding this value on my page. and the code is:

      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);
        }

}

I want to delete when the cross section will clicked. But I can't able to delete it. -_-

So what i wrote:

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

It just shows Deleted alert but why not deleting anything.

How to do it. Please help

Answer 1

You need to pass a correct this to your myFunction function.

Currently you are passing:

onclick="myFunction(this.id)"

But you should pass a reference to the element clicked, so you can do:

onclick="myFunction(this)"

and then:

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

Minimal Demo:

 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>

---

To debug such scenarios you should use console.log instead of alert and then you could have meaningful logs, such as console.log(this) to see if this is a the DOME node you want or is it something else.

Answer 2

I would go with:

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

You have to check the position of your click event (which DOM element is clicked) and then go upwards until you reach the main container (eg job-list ). Hope this helps and I did read the HTML correctly.

Answer 3

I think you want to delete whole job-list class div on the bookmark-remove link click. To do that you can use .closest() method instead.

Firstly, update your HTML string like:

'<a href="#" class="bookmark-remove" onclick="myFunction(this)"><i class="fas fa-times"></i></a>'+

So, here instead on passing the this.id , we want to pass the current dom element to the clcik event handler like myFunction(this) and then update the function like:

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

---

Also, it's generally not a good idea to use inline event handlers. So, you can use Event Delegation here instead like:

1. Remove the onclick attribute from HTML string first and just keep it:

    '<a href="#" class="bookmark-remove"><i class="fas fa-times"></i></a>'+...

2. Then attach a delegated event handler like:

    $('.bookmark-area').on("click", ".bookmark-remove", function(event) { event.preventDefault(); $(this).closest('.job-list').remove() });