راکت
karakar
karakar
توسط karakar مطرح شد
حل
2 پاسخ

ایجاد یک المنت و حذف آن در جاواسکریپت

سلام
من توسط دستور insertAdjacentHTML در جاوااسکریپت، یک تگ div را در یک قسمت از صفحه اضافه میکنم. حالا چطور میتونم دستور بدم زمانیکه بر رو باقی قسمتهای صفحه در body ( بجز خود این div) کلیک شد، این div حذف بشه؟
هرجور ایجادش میکنم، صفحه div ایجاد میشه و سریعا حذف میشه!

let newElement = '<div id="new-element">...</div>';
document.getElementById('button').addEventListener('click', function (event) {
    document.body.insertAdjacentHTML('beforeend', newElement);
}
document.addEventListener('click', function (event) {
let node = document.getElementById('new-element');
if (node && !node.contains(event.target)) {
    document.getElementById('new-element').remove();
}
}
<body>
...
<button type="button" id="button">Create!</button>
...
</body>

ثبت پرسش جدید
woz
woz
تخصص :fan of open source world
@wozniak4 سال پیشمطرح شد
2

خب معلومه که باید این مشکل رو داشته باشید :
زیرا شما در یک زمان event آن کلیک رو هم روی دکمه تون برای ایجاد قرار دادید و ایونت حذف رو هم روی body قرار دادید. زمانی که روی button کلیک می کنید در واقع روی body هم کلیک شده پس ایونت روی body هم اجرا میشه . باید از

event.stopPropagation();

استفاده کنید که ایونت روی باتن به body انتشار پیدا نکنه!
شما کدتون رو به صورت زیر تغییر بدید مشکلتون شاید حل شد . (البته در کل اصولی نوشته نشده کدتون . پیشنهاد من استفاده از jQuery است )

let newElement = '<div id="new-element">...</div>';
document.getElementById('button').addEventListener('click', function (event) {
event.stopPropagation();
    document.body.insertAdjacentHTML('beforeend', newElement);
}
document.addEventListener('click', function (event) {
let node = document.getElementById('new-element');
if (node && !node.contains(event.target)) {
    document.getElementById('new-element').remove();
}
}

میلاد-م
میلاد-م
تخصص :توسعه‌دهنده رابط کاربری - Front-End
@milad4 سال پیشمطرح شد
2

اینکه چطور HTML و CSS رو برای ایجاد عنصر جدید بنویسید، در روند رسیدن به هدف تون بسیار موثر خواهد بود.
از این کد نمونه می تونید الگوبرداری کنید:
https://www.w3schools.com/howto/howto_css_modals.asp


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام