Как удалять и создавать блоки в js?

Question

[cdfgharweer33]

На странице имеется 3 блока:

<div class="text_block_1">
<div class="text_block_2">
<div class="text_block_3">

При нажатии на кнопку "закрыть" на одном из этих блоков, блок, на котором мы нажали эту кнопку, уезжает в сторону и исчезает, а на его месте должен появиться новый блок с class предыдущего блока. Как сделать этот код универсальным под любой блок (чтобы, если мы удаляли блок _3, он исчезал и на его месте появлялся другой с тем же id)? И чтобы блок появлялся не снизу, а на месте предыдущего?

$(document).ready(function(){
    $('.icon-close').click(function(){
        $('.text_block_1').addClass('hide');
        $('.content-blocks').append(' <div class="text_block_1">другой текст, отличный от предыдущего блока</div>')
    });
    });

Comments

[Дмитрий Демиденко]

"чтобы, если мы удаляли блок _3, он исчезал и на его месте появлялся другой с тем же id"
Для начала избавьтесь от одинаковых id на странице. Используйте классы если элементов более одного.

Answer 1

[Дмитрий Демиденко]

Решение примерно такое должно быть. Если хотите лучший ответ, сформулируйте более конкректный вопрос

$(document).ready(function(){
    $('.icon-close').click(function(){
        $('.text_block_1').addClass('hide'); // здесь можно вызвать метод hide() || fadeOut() 

        const index = $(this).attr('data-index');
        const temp_text = $(`.class_name${index}`).text();
        $('.content-blocks').append(`<div class="text_block_${index}">${temp_text}</div>`);
    });
    });

Comments

[cdfgharweer33]

Index возвращает "undefined". Уточню, html имеет такой вид:

<div class="text_block_1">текст<div class="icon-failed"></div></div>
<div class="text_block_2">другой текст<div class="icon-failed"></div></div>
<div class="text_block_3">другой текст<div class="icon-failed"></div></div>

Т.е., у каждого блока своя кнопка для закрытия. При нажатии на кнопку, блок исчезает и на его место должен встать такой же (за исключением текста, который получается из БД), с ID уничтоженного блока (я так понял, класс ".hide" в этой ситуации лучше не присваивать, а сразу уничтожать). Просьба не бить ссаными тряпками, до этого писал под десктоп, только недавно начал осваивать веб.

[Дмитрий Демиденко]

cdfgharweer33, Я привел псевдокод. Вы должны добавить элементу, на который нажимаете атрибут data-index вручную. Под этим индексом я подразумевал этот id который Вы указывали.
По нажатии на элемент ваш callback создает собственный обьект this. Получив этот id (индекс Вы сможете выполнить свою задачу). Если Текст получается с БД, то нужно отослать ajax запрос методом $.post или $.ajax

[cdfgharweer33]

Всё сделал, спасибо. Ещё вопрос, как лучше реализовать получение данных из SQLite? Если отправлять запросы на какой - нибудь php скрипт (который в свою очередь работает с базой), это будет не безопасно (даже если делать уникальные идентификаторы и другие методы об, необходимые для запроса,js код всё равно открыт пользователю). А в Javascript нашёл единственную библиотеку sql.js, но работая на стороне клиента, получать контент из БД, так же не безопасно (опять же, открытый код).

Answer 2

[Dies Irae]

JSFiddle

$(".close").click(function(){
			let next_block = $(this).parent().next();
      $(this).parent().hide("slow", function(){ // Callback-Функция после анимации hide()
      	next_block.show("fast");
      })
});

Parent - это потому что у меня кнопка закрытия внутри блока.