افزوردن المنت جدید با 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)
})
})
پاسخها
5
آره دیگه حالا من سینتکس دقیقش یادم رفته😅
اگه همینطوری جواب میگیری همین رو استفاده کن👌👌
سلام در واقع شما یک لیست داینامیک درست میکنی که هر آیتم شامل اینپوت است.
به نظرم میتونی خیلی راحت تر از innerHTML استفاده کنی که html رو میسازی و داخل همون div اولی که ساختی قرار میدی یا اینکه میتونی innerHTML المنت پدر که شامل همون لیست این المان هاست رو میگیری و المان جدیدت رو اضافه میکنی بهش و دوباره توی خودش ذخیره میکنی. اینجوری خوانایی کدت خیلی بالاتر میره و بهینه تر هم است
سلام
راهی که رفتی درسته ولی بهترین راه نیست !
این لینک رو بخون بنظرم بهتره تا اون بالایی مثال هم داره قشنگ میگیری که چی میگه
یه قابلیت جدیدم اضاف شده به js به عنوان shadow DOM اینم سرچ کن تو گوگل مثال های زیادی هست بنظرم اون مدلی که خودت نوشتی رو بیخیال شو واقعا وحشتناکه😂
گفتگوهای مرتبط
شاید پاسخ شما همینجا باشد
یعنی تمام المنت هام رو توی این بنویسم ؟
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>
');برای حذف المنت ایجاد شده این رو نوشتم
document.querySelectorAll('.removeElement').forEach(e => {
e.addEventListener('click', () => {
e.parentNode.remove()
})
})اما این فقط المنت هایی رو که وقتی DOM لود میشه وجود دارن رو حذف میکنه و روی المنتهای جدیدی که ایجاد میشه تاثیر نداره