jQuery로 HTML에서 요소 제거

Question

사용자가 자신의 네비게이션 시스템을 구축하는 시스템을 구축 중입니다. 사용자가 사이트를 방문 할 때 사용할 수있는 항목 목록이 있습니다. 모든 주제 내용, 현재 어떤 사람이 나를 인도 할 수 있습니다,이 코드를 가지고 있지만, 그것은 작동하지 않습니다,

자바 스크립트

$("a.navlink").click(function(ev) { 
     var url = $(this).attr("href") 
     var id = $(this).attr("id") 
     ev.preventDefault(); 
     if(!$(this).hasClass('saved')) { 
      //$("a.navlink").addClass('active') 
       $.ajax ({ 
        url: url, 
        type: "POST", 
        data: "method=add&id="+id, 
        success: function (html) { 
         $('#accordion').accordion('destroy'); 
         $("#accordion").append(html); 
         $('#accordion').accordion({ 
          //active: 0, 
          header:'h2.'+id, 
          collapsible:true 
         }); 
        $("a.navlink").addClass('saved'); 
        } 
       }); 
     } else if($("a.navlink").hasClass('saved')) { 
      $.ajax ({ 
       url: url, 
       type: "POST", 
       data: "method=delete", 
       success: function (html) { 
        $("a.navlink").removeClass('saved'); 
        //$("."+id).remove(); 
       } 
      });  
     } 
    }); 

HTML/PHP를 상단을 제거해야 다시 항목을 클릭하면 그 아코디언을 만든다.

<?php 
var_dump($_POST); 
if(isset($content)) { 
    foreach($category_name as $k => $v) { 
     echo "<h2 class=".$this->input->post('id')."><a href='#'>$v[category_name]</a></h2>"; 
     echo "<div class='$v[category_name]'>"; 
    } 
    $replace = array(".", "png", "gif", "jpg"); 
    $count = 0; 
    foreach($content as $k=>$v) { 
    $count ++; 
    $image_name = str_replace($replace, "", $v['image_name']); 
    echo "<a class='contentlink' href='index.php/home/get_content_abstract/$v[content_id]'>"; 
    echo "<img src='/media/uploads/".strtolower($v['category_name'])."/".$image_name."_thumb.png' alt='This is the picture' />"; 
    echo "</a>"; 
    } 
    echo "</div>"; 
//die(var_dump($content)); 
} 

if(isset($favourites_category)) { 
    //die(var_dump($favourites)); 
    echo "<h2 class=".$this->input->post('id')."><a href='#'>$favourites_category</a></h2>"; 
    $count = 0; 
    $replace = array(".", "png", "gif", "jpg"); 
    foreach ($favourites as $row) { 
     $count ++; 
     $image_name = str_replace($replace, "", $row['image_name']); 
     echo "<div class='$favourites_category'>"; 
     echo "<a class='contentlink' href='index.php/home/get_content_abstract/$row[content_id]'>"; 
     echo "<img src='/media/uploads/".strtolower($row['category_name'])."/".$image_name."_thumb.png' alt='This is the picture' />"; 
     echo "<a/>"; 
     echo "</div>"; 
    } 
} 
?> 

기본적으로 생성 된 각 아코디언을 식별해야하며 스크로 그에 아코디언이있는 동안 해당 링크를 누르면 아코디언이 화면의 HTML에서 삭제됩니다.

Answer 1

콜백 함수에는 ajax 호출과 다른 컨텍스트가 있습니다. 변수 id 및 url은 콜백에서 액세스 할 수 없습니다. 콜백에서 AJAX 호출을 사용하도록 전달할 수 있지만 응답은 HTML 대신 JSON이어야합니다.

도 있습니다 (else if 등) 몇 군데에서 (첫 번째 a.navlink로 평가됩니다) $("a.navlink") 대신 $(this) 있습니다. 여기

는 일부 업데이트 된 코드입니다,하지만 난 당신이

$("a.navlink").click(function(ev) { 
    var url = $(this).attr("href") 
    var id = $(this).attr("id") 
    ev.preventDefault(); 
    if(!$(this).hasClass('saved')) { 
    //$("a.navlink").addClass('active') 
    $.ajax ({ 
     url: url, 
     type: "POST", 
     data: {method: 'add', id: id}, 
     dataType: "json", 
     success: function (response) { 
     //vars url and id are not accessible here 
     //so it needs to be returned from the ajax call 
     $('#accordion').accordion('destroy'); 
     $("#accordion").append(response.html); 
     $('#accordion').accordion({ 
      //active: 0, 
      header:'h2', 
      collapsible:true 
     }); 
     $("#" + response.id).addClass('saved'); 
     } 
    }); 
    } else if($(this).hasClass('saved')) { 
    $.ajax ({ 
     url: url, 
     type: "POST", 
     data: {method: 'delete', id: id}, 
     dataType: "json", 
     success: function (response) { 
     $("#" + response.id).removeClass('saved'); 
     $("h2." + response.id).remove(); 
     } 
    });  
    } 
}); 

을 무엇을하려고에 실제 명확하지 않다