Попытка удалить класс remove html element после успешного ajax публикации

Question

Я пытаюсь удалить класс из элемента после успешной публикации. Приведенный ниже код упрощен для простоты и не удаляет класс.

Я не уверен, в чем проблема.

Элемент страницы:

    <div class="hide-lorem form-group row" id="LoremId">
        <div class="col-lg-10">
            Lorem
        </div>
    </div>

Javascript

                $.ajax({
                    type: "POST",
                    url: url,
                    data: $("#LoremHandler").serialize(),
                    success: function (data) {
                        var tr = "";

                        $("#LoremId").removeClass("hide-lorem");

                        //Append each row to html table
                        for (var i = 0; i < data.Jumps.length; i++) {
                            var date = dateFormatter(data.Jumps[i].LoremDate);
                            tr = $("<tr/>");
                            tr.append("<td>" + date + "</td>");
                            tr.append("<td>&pound;" + data.Jumps[i].LoremPlace + "</td>");
                            $("table").append(tr);

                        }
                    },
                    failure: function(response) {
                        alert(response.responseText);
                    },
                    error: function(response) {
                        alert(response.responseText);
                    }
                });

Answer 1

Несколько моментов, на которые стоит обратить внимание.

Проблема: Вы пытаетесь удалить класс из ID, поскольку у вас могут быть другие идентификаторы на странице с таким же именем.

Причина: Использование ID не идеально, так как я предполагаю, что у вас может быть другой идентификатор с тем же именем. Это вызывает эту проблему.

Простое и предлагаемое решение: Я бы предложил добавить class к вашему элементу, а затем removeClass() из этого элемента. Я также добавил LoremId как класс в ваш div.

См. Рабочий код ниже:

$.ajax({
  type: "POST",
  url: url,
  data: $("#LoremHandler").serialize(),
  success: function(data) {
    var tr = "";

    $(".LoremId").removeClass("hide-lorem");

    //Append each row to html table
    for (var i = 0; i < data.Jumps.length; i++) {
      var date = dateFormatter(data.Jumps[i].LoremDate);
      tr = $("<tr/>");
      tr.append("<td>" + date + "</td>");
      tr.append("<td>&pound;" + data.Jumps[i].LoremPlace + "</td>");
      $("table").append(tr);

    }
  },
  failure: function(response) {
    alert(response.responseText);
  },
  error: function(response) {
    alert(response.responseText);
  }
});

<div class="hide-lorem form-group row LoremId" id="LoremId">
  <div class="col-lg-10">
    Lorem
  </div>
</div>

Надеюсь, это поможет.