Jquery Ajax - response should replace html

I'm beginning in Ajax and I have a couples of problems. I have a page with a list containning some video thumbnails, when you rollover on them, there's a "I dislike this" icon showing. That's done. Now where iam having problem is:

When you click that icon, the video title, thumbnail & info should disapear and another video must show.

Here's my Ajax code

function ThumbsDown(id,sort,page) {
$.ajax({
    url: "/change/videos/"+id+"/thumbsdown/",
    type: "POST",
    data: {
        "sort": sort?sort:"",
        "page": page?page:""
    },
    complete: function(result) {
         // Instead of calling the div name, I need to be able to target it with $(this) and .parent() to make sure only 1 video change, but for now I only want the response to replace the video
         $("#content .videoList ul li.videoBox").html(result);             
    }
});
}

The request is working, im gettin a (200 OK) response. And it's returning me the HTML code block for the new video.

The problem is, when I click the icon, all the html in the div is gone. I have an empty tag, so I guess its interpreted as "empty". But in my firebug .Net tab, I can see clearly that there IS a response.

Any help please? ALREADY FIXED, THANKS

** EDIT **

Now im having problems to target the specific div with$(this) and parents(). Can someone help?

I want to target the li #videoBox

<li class="videoBox recommended">
   <div class="spacer" style="display: block;"></div>
   <div class="features">
      <div>
         <a class="dislike_black" title="I dislike this" onclick="ThumbsDown(30835, 'relevance', '1');"></a>
      </div>
    ...

I tried this, and its not working.

    success: function(data) {
        $("#content .videoList ul li.videoBox").html(data); // this IS WORKING, but replacing ALL the thumbs
        $(this).parents("li.videoBox").html(data); // THIS IS NOT

What Im I doing wrong?

Solution

The problem you're having, is that you are using the "complete" callback function. This can be misleading, but that callback is meant to be called after a success or a failure. It's more for cleanup, and doesn't receive the response data as you would expect. Basically, all you need to do is change "complete" to "success", and you should receive your expected result.

However, I personally don't suggest using the Ajax function, since it looks like it's entirely unnecessary. The Ajax function exists mostly for complex transactions, and it looks like you have a fairly simple one. What I suggest, is using the "shortcut" function that jQuery provides, like so:

$.post(`/change/videos/${id}/thumbsdown/`, {sort:'', page:''}, function(result){
    // Instead of calling the div name, I need to be able to target it
    // with $(this) and .parent() to make sure only 1 video change,
    // but for now I only want the response to replace the video

     $('#content .videoList ul li.videoBox').html(result);
}, 'html');