Как заменить теги при использовании clone()?

DanKud, вот я попытался подключить localStorage, но у меня отображается только один параграф

А как сделать, чтобы добавлялись все параграфы и удалялись из localStorage по одному ?

https://codepen.io/Genri_Rus/pen/OGMNWY

Как заменить теги при использовании clone()?

DanKud, а ничего страшного не будет ?

Если у меня на jquery и нативном javascript'е одновременно код будет написан?

Как заменить теги при использовании clone()?

DanKud, спасибо за все Советы !

У меня также в плане добавить куки к чекбоксам, чтобы можно было сохранять все клики

Для этого, я так понял уже нужно подключить библиотеку jquery cookie или лучше через local storage ?

Как заменить теги при использовании clone()?

DanKud, я нашел ошибку, сейчас вот так не работает:

https://codepen.io/Genri_Rus/pen/NJoVZj

А как сделать, чтобы все равно работало с учетом дизайна ?

Как заменить теги при использовании clone()?

DanKud, самое интересное это то, что если я свой код не оборачиваю в $(function..., то код у меня не работает

Как заменить теги при использовании clone()?

DanKud, самое обидное, что именно при снятии любого одного чекбокса (

Как заменить теги при использовании clone()?

DanKud, понял )

У меня на сайте в коде вот такая конструкция

Скрипт на jquery начинается с такой записи:

$(function() {

Внутри этого кода, я добавил:

$('body').on('change', '.check', function(){
    .....
});

$(document).on('click', e => {

});

});

На codepen я не писал $(function()
Просто у меня все равно почему-то скрывается модальное окно при снятии галочки с инпута

Как заменить теги при использовании clone()?

DanKud, заранее спасибо за ответ и за разъяснения!, только вот одно странно - на codepen работает, а на моем сайте нет :/

Вот так с кнопкой пытался, но почему-то при нажатии - модальное окно не выезжает ...

https://codepen.io/Genri_Rus/pen/NJoVZj

Как заменить теги при использовании clone()?

DanKud, я вот переделал для наглядного примера: https://codepen.io/Genri_Rus/pen/NJoVZj

Как только я начинаю удалять параграфы, у меня скрывается модальное окно

При этом я добавил вне области по клику мышкой скрытие модального окна, что в итоге привело к такой проблеме

Как заменить теги при использовании clone()?

DanKud, Добрый вечер!

У меня возникла еще такая проблема:

$(document).mouseup(function (e){
		var modalShow = $(".modal-hide");
		if (!modalShow.is(e.target) && modalShow.has(e.target).length === 0) {
			$(".modal").removeClass("modal-hide");
		}
	});

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

https://codepen.io/Genri_Rus/pen/NJoVZj

Как заменить теги при использовании clone()?

DanKud, все работает !

Теперь же можно подключить куки к данным параграфам, чтобы они сохраняли историю checked'ов ?

Также clone уже не нужен будет, т.к. мы будем вытаскивать данные с куков с помощью .html() ?

Как заменить теги при использовании clone()?

DanKud, или я что-то неправильно делаю ?

У меня при добавлении всех параграфов и в поочередном снятии 3 галочек с инпутов - удаляется и первый параграф:

https://codepen.io/Genri_Rus/pen/NJoVZj

Как заменить теги при использовании clone()?

DanKud, мне нужно сделать так, чтобы при удалении всех параграфов была надпись: Здесь ничего нет

А как только я добавляю новый параграф - надпись: "Здесь ничего нет" исчезала

Как заменить теги при использовании clone()?

DanKud, просто я хотел добавить информацию, что модульное окно пустое

Пытался сделать так, но при добавлении параграфов - данное сообщение не удаляется:

$('body').on('change', '.check', function(){
    var replace = '';
    var elements = $(this).parent().siblings('.copy, .copy-2');
    var modal = $('.modal');

    $(elements).each(function() {
      replace += this.outerHTML.replace(/(<|<\/)p/g, '$1span');
    });

    var wrapReplace = '<div class="item">' + replace + '</div>';

    if ($(this).prop('checked')) {
        modal.append(wrapReplace);
    } else {
        modal.html(modal.html().replace(wrapReplace, ''));
    }
    
    if ($('input').is(':checked')) {
         modal.show();
    } else {
         modal.addClass('modal-hide').text('Здесь ничего нет');
    }
});

Как заменить теги при использовании clone()?

DanKud, я еще сделал вот так, но почему-то добавляется только один параграф:

$('body').on('change', '.check', function(){
    var replace = '';
    var elements = $(this).parent().siblings('.copy, .copy-2');
    var modal = $('.modal').html('');

    $(elements).each(function() {
      replace += this.outerHTML.replace(/(<|<\/)p/g, '$1span');
    });

    var wrapReplace = '<div class="item">' + replace + '</div>';

    if ($(this).prop('checked')) {
        modal.append(wrapReplace);
    } else {
        modal.html(modal.html().replace(wrapReplace, ''));
    }
    
    if ($('input').is(':checked')) {
        modal.addClass('modal-show');
    } else {
         modal.addClass('modal-hide').text('Здесь ничего нет');
    }
});

https://codepen.io/Genri_Rus/pen/NJoVZj

Как заменить теги при использовании clone()?

DanKud, в очередной раз спасибо !

Вы изначально отошли от clone и перешли на outerHTML
Я так понял clone редко используют и у него мало возможностей ?
У меня в планах было создать небольшую корзину на странице с использованием куков
Данный вариант вполне подойдет ?
Я также хочу к товару добавить крестики в виде remove, которые будут удалять товар в самом модульном окне
И еще, как сделать эффект полета картинки в корзину ?

Допустим тех же параграфов, offset нужны ?

Как заменить теги при использовании clone()?

DanKud, вот так будет правильно ?

$('body').on('change', '.check', function(){
		var replace = '';
		var elements = $(this).parent().siblings('.copy, .copy-2');
		$(elements).each(function() {
			replace += this.outerHTML.replace(/(<|<\/)p/g, '$1span');
			// console.log(replace);
		});
		var modal = $('.modal');
		if ($(this).prop('checked')) {
			var wrapReplace = '<div class="item">' + replace + '</div>';
			modal.append(wrapReplace);
		} else {
			modal.html(modal.html().replace(wrapReplace, ''));
		}
});

https://codepen.io/Genri_Rus/pen/NJoVZj

Но у меня почему-то не удаляется список

Единственное, я не знаю как скрыть модульное окно, если с инпутов убраны все галочки

Как заменить теги при использовании clone()?

DanKud, мне бы так научиться, у вас круто объяснять получается !

Я еще пытался сделать так, чтобы обернуть '.copy, .copy-2' в один div блок

Искал и нашел, что вроде wrap() за это отвечает ?

И в конце, как спрятать $('.modal'), если все галочки не активированы ?

Допустим добавили несколько галочек в модульное окно (.modal), а при деактивации всех галочек это окно удалить ?

Как заменить теги при использовании clone()?

DanKud, я пытался сделать так, но у меня почему-то данные не удаляются:

https://codepen.io/Genri_Rus/pen/NJoVZj

$('body').on('change', '.check:checked', function(){ 
		if ($(this).prop('checked')){
			$(this).parent().siblings('.copy, .copy-2').clone().appendTo(".modal");
		} else {
			$('.modal').empty();
		}
	});

Как заменить теги при использовании clone()?

DanKud, понял )
А вот допустим, если убрать с инпута галочку, то как сделать так, чтобы добавленный параграф был удален с .modal
Тут нужно использовать уже event ?