проблемы с обновлением DOM после http-запроса, нет фреймворка

Привет, Я хотел бы, чтобы кнопка исчезла после того, как я удалил соответствующие данные (связанные с этой кнопкой) из базы данных.

Маленькая кнопка удаления внутри большой кнопки должна вызвать ее исчезновение. Кнопка удаления исчезнет, но родительская кнопка не исчезнет. В чем здесь может быть проблема? Большое спасибо! Маленькая кнопка внутри большой кнопки — это четвертый ребенок! текст, диапазон, кнопка, кнопка

  $('button.cross').on('click',function(event) {


event.stopPropagation();


sectionID = ($(this).attr("data-sectionid"));


if(confirm("Deleting a section will also delete all CPs of this section. Are you sure you want to proceed?")) {


self = this;


$.ajax({


type:'POST',


url:'./http.php?action=delSection',


data: "sectionId=" + sectionID,


success: function (result) {


//THIS WORKS:


$(self).css("display","none");


//THIS DOES NOT WORK


$(self).parent().css("display","none");


},


error: function(xhr,status,error) {


var errorMessage = xhr.status + ': ' + xhr.statusText


alert('Error - ' + errorMessage);


},


});


}


}); 

Код (JavaScript):

Мне нужно увидеть разметку, которой вы манипулируете, и/или страницу, о которой идет речь, чтобы правильно оценить ситуацию, но я думаю, что первая большая ошибка — это отупляющая тупая чушь, известная как jQuery, в частности то, как она научила вас всему, кроме как манипулировать DOM или делать многое правильно.



Такая чушь, как избыточность родительских функций, то, как вы используете CSS вместо фактического удаления вещей и т. д. и т. п., просто заставляет вас работать усерднее, а не умнее.

Мне действительно интересно, что такого в этом крутом помощнике, который заставляет людей думать, что такой идиотизм, как jQuery, стоит использовать в первую очередь.

Вопрос: кнопка удаления находится В том разделе, который нужно удалить? Если да, то почему бы не удалить раздел И кнопку, одновременно вырывая их из DOM с помощью родительского узла.removeChild? Не похоже, что это то, что вам следует скрывать, похоже, что это то, что вам следует УДАЛИТЬ.

На самом деле здесь меньше кода, чем в jQuery, и, ИМХО, гораздо яснее, что там происходит. Прежде всего, обратите внимание, что мы можем использовать то, как значение BUTTON может отличаться от его содержимого.

Одна из главных причин использовать BUTTON вместо INPUT type="button". Мы по-прежнему устанавливаем type="button", чтобы они не пытались отправить какие-либо формы при нажатии.

(по умолчанию — ОТПРАВИТЬ!) В сценарии мы просматриваем и извлекаем все элементы remove внутри нашей корзины покупок и добавляем обработчик событий. Обработчик сначала выполняет подтверждение с помощью возврата, таким образом код не нужно анализировать до конца, и он может просто выйти.

Больше никаких «других». По возможности я объявляю локальные переменные заранее вместе.

Я снимаю кнопку с «this.currentTarget», так как она нужна нам внутри нашего обработчика AJAX. Переменная data — это объект FormData, который представляет собой простой, безопасный и надежный способ передачи данных на сторону сервера.

Обратите внимание: если вы пытаетесь использовать ajax для всей формы, вы можете передать элемент FORM в «new FormData()», и он извлечет все применимые значения. Наконец, «x» — наш XMLHttpRequest.

Обработчик загрузки проверяет наличие 200. Я использовал переключатель, поскольку часто использую различные состояния ошибок, чтобы сообщить о том, что происходит, без необходимости обработки всего тела ответа.

Состояние 200 ищет TR, который является предком кнопки, и удаляет его из таблицы.

В противном случае сообщите об ошибке.

Как только это будет установлено, откройте запрос и отправьте данные.

НЕ ракетостроение, НЕ сложнее, чем то, что jQuery заставляет людей думать, что это лучше.

ПРИМЕЧАНИЕ: также не совместим с IE9/более ранними версиями, так как я использую ".onload"... О ЧУВСТВИТЕЛЬНО ХОРОШО!

Во многом это одна из «проблем» jQuery — они все еще добавляют дополнительные методы переноса для исправления вещей, которые больше не нуждаются в исправлении.

Что-то, от чего я только недавно разозлился, поэтому не могу их полностью винить в этом.

Да, это ОДИН HTTP-запрос, возможно, из 30 или 40 бизнес-сайтов.

Можете ли вы абстрагировать эту связь между клиентом и сервером, чтобы что я могу легко проверить все в одном файле? Вы концентрируетесь на одном конкретном случае и приходите к очень хорошему решению.

Но это решение ограничено этим ОДНЫМ случаем. React, angular и vue (я не говорю о jquery!!) помогают сделать вещи более абстрактными.

(И вам НЕ нужно заботиться о DOM или вообще обновлять DOM с помощью этих фреймворков, они управляют DOM!!) Я здесь и спрашиваю вас о конкретном случае, а вы мне даете конкретный ответ.

Но что, если прийти сюда и спросить тебя как реализовать сложную бизнес-логику или графический интерфейс?