مهدی
2 سال پیش توسط مهدی مطرح شد
5 پاسخ

افزوردن المنت جدید با JS

سلام دوستان میخواستم نظرتون رو در مورد این کد بدونم
توی صفحه یک دکمه add دارم که وقتی میزنم میخوام چند تا المنت ایجاد کند و با زدن دکه حدف المنت ایجاد شده رو حدف کنه
برنامه به درستی کار میکنه میخوام ببینم بهینه هست یا نه
ممنون

let form = document.getElementById('aboutForm');

document.getElementById('addMore').addEventListener('click', () => {

    //Make Div
    const div = document.createElement('div')
    div.classList = 'bg-gray-300 p-5 mt-6 relative'

    //Caption Label
    const CaptionLabel = document.createElement("label")
    CaptionLabel.classList = 'block text-sm text-gray-600 mt-6'
    CaptionLabel.innerText = ` توضیح`
    CaptionLabel.setAttribute('for', 'Side_Caption')

    //Title Label
    const TitleLabel = document.createElement("label")
    TitleLabel.classList = 'block text-sm text-gray-600'
    TitleLabel.innerText = ` عنوان`
    TitleLabel.setAttribute('for', 'Side_Title')

    //Caption Inputbox
    const CaptionInputbox = document.createElement("input")
    CaptionInputbox.classList = 'w-full border-none px-5 py-1 text-gray-700 bg-gray-200 rounded'
    CaptionInputbox.setAttribute('name', 'Side_Title[]')
    CaptionInputbox.setAttribute('id', 'Side_Title')

    //Caption Inputbox
    const TitleInputbox = document.createElement("input")
    TitleInputbox.classList = 'w-full border-none px-5 py-1 text-gray-700 bg-gray-200 rounded'
    TitleInputbox.setAttribute('name', 'Side_Caption[]')
    TitleInputbox.setAttribute('id', 'Side_Caption')

    //Remove Button
    const remove = document.createElement("button")
    remove.classList = 'absolute text-xl top-0'
    remove.innerHTML = '<i class="fas fa-times text-red-600"></i>'
    remove.setAttribute('type', 'button')

    //Appernd Elements
    form.append(div)
    div.appendChild(TitleLabel)
    div.appendChild(TitleInputbox)
    div.appendChild(CaptionLabel)
    div.appendChild(CaptionInputbox)
    div.appendChild(remove)

    //Remove Function
    remove.addEventListener('click', () => {
        form.remove(div)
    })
})

ثبت پرسش جدید
محمد زورمند
تخصص : react developer
@SpyStar0003 2 سال پیش مطرح شد
1

آره دیگه حالا من سینتکس دقیقش یادم رفته😅
اگه همینطوری جواب میگیری همین رو استفاده کن👌👌


سینا شاه‌اویسی
تخصص : برنامه نویس فرانت اند
@sinashahoveisi 2 سال پیش مطرح شد
0

سلام در واقع شما یک لیست داینامیک درست میکنی که هر آیتم شامل اینپوت است.
به نظرم میتونی خیلی راحت تر از innerHTML استفاده کنی که html رو میسازی و داخل همون div اولی که ساختی قرار میدی یا اینکه میتونی innerHTML المنت پدر که شامل همون لیست این المان هاست رو میگیری و المان جدیدت رو اضافه میکنی بهش و دوباره توی خودش ذخیره میکنی. اینجوری خوانایی کدت خیلی بالاتر میره و بهینه تر هم است


محمد زورمند
تخصص : react developer
@SpyStar0003 2 سال پیش مطرح شد
1

سلام
راهی که رفتی درسته ولی بهترین راه نیست !

این لینک رو بخون بنظرم بهتره تا اون بالایی مثال هم داره قشنگ میگیری که چی میگه

عنوان لینک مورد نظر

یه قابلیت جدیدم اضاف شده به js به عنوان shadow DOM اینم سرچ کن تو گوگل مثال های زیادی هست بنظرم اون مدلی که خودت نوشتی رو بیخیال شو واقعا وحشتناکه😂


مهدی
تخصص : Backend Developer
@mahdidv 2 سال پیش مطرح شد
1

یعنی تمام المنت هام رو توی این بنویسم ؟

    subject.insertAdjacentHTML(positionSelect.value, '
    <div class="bg-gray-300 p-5 mt-6 relative">
        <div class="">
            <label class="block text-sm text-gray-600" for="Side_Title">Title
                <input class="w-full border-none px-5 py-1 text-gray-700 bg-gray-200 rounded" id="Side_Title" name="Side_Title[]" type="text" >
            </label>
        </div>
    ');

محمد زورمند
تخصص : react developer
@SpyStar0003 2 سال پیش مطرح شد
1

آره دیگه حالا من سینتکس دقیقش یادم رفته😅
اگه همینطوری جواب میگیری همین رو استفاده کن👌👌


مهدی
تخصص : Backend Developer
@mahdidv 2 سال پیش مطرح شد
0

برای حذف المنت ایجاد شده این رو نوشتم

document.querySelectorAll('.removeElement').forEach(e => {
        e.addEventListener('click', () => {
            e.parentNode.remove()
        })
    })

اما این فقط المنت هایی رو که وقتی DOM لود میشه وجود دارن رو حذف میکنه و روی المنتهای جدیدی که ایجاد میشه تاثیر نداره


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

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