ایجاد یک المنت و حذف آن در جاواسکریپت
سلام
من توسط دستور 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>
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
خب معلومه که باید این مشکل رو داشته باشید :
زیرا شما در یک زمان 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();
}
}
اینکه چطور HTML و CSS رو برای ایجاد عنصر جدید بنویسید، در روند رسیدن به هدف تون بسیار موثر خواهد بود.
از این کد نمونه می تونید الگوبرداری کنید:
https://www.w3schools.com/howto/howto_css_modals.asp