Удалить элемент из HTML с помощью jQuery

Question

Я строю систему, в которой пользователь строит свою собственную навигационную систему, процесс, когда пользователь посещает сайт, есть список доступных тем, которые он может выбрать, выбрать топ-создание и аккордеон, который содержит все содержимое этих тем, нажав опять тема должна удалить верхнюю, сейчас у меня есть этот код, но он не работает, может кто-нибудь мне подсказать,

JavaScript

$("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, чтобы использовать его в обратном вызове, но ответом должен быть JSON вместо HTML.

Кроме того, у вас есть $("a.navlink") (который будет равен первому a.navlink) вместо $(this) в нескольких местах (например, else if).

Вот обновленный код, но я не совсем понимаю, что вы пытаетесь сделать

$("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();
      }
    });    
  }
});