چطور یه فانشن ساخت و حذف المنت بسازیم
سلام دوستان. یه فانشنی ساختم که یه ورودی به عنوان آیدی میگیره و هردفعه که فراخوانی میشه یه input با همون آیدی که فانشن بصورت ورودی گرفته، می سازه. اما میخوام طوری این کار رو انجام بده که با هربار فراخوانی، اول input قبلی ای که ساخته رو از صفحه html حذف کنه و یه جدیدی رو بسازه.
چطور این کار رو انجام بدم؟
js:
function getInput(textInputId) {
textInput = document.createElement("input");
textInput.setAttribute("id", textInputId);
btn.parentElement.appendChild(textInput);
}html:
<body>
<button type="button" id="btn" onclick="getInput('#textInput');">Get input</button>
</body>
با آی دی یا کلاس اول المان رو پیدا کن
حذفش کن
document.querySelector("#textInputId").remove()و بعد دوباره المان رو بساز
اگه منظورتون این کار پایینه، خب هرچی میکنم المنت رو پیدا نمیکنه و کلا null برمیگردونه
function getInput(textInputId) {
let btn = document.querySelector("#btn");
let textInput = document.querySelector(textInputId);
console.log(textInput) // returns null
if (textInput) { textInput.remove(); }
textInput = document.createElement("input");
textInput.setAttribute("id", textInputId);
btn.parentElement.appendChild(textInput);
}
به این قسمت از کدت دقت کن
textInput.setAttribute("id", textInputId);داری یه متغیر رو به عنوان id مقداری دهی میکنی
که مقدارش برابر با textInput# هست
در صورتی که باید برابر با textInput باشه
داری # رو هم پاس میدی
که باعث میشه المان پیدا نشه
textInput.setAttribute("id", "textInput");اوه اوه. واقعا اصلا متوجه این موضوع نشدم. حدود یک ساعت باهاش درگیر بودم. خیلی ممنونم که این نکته رو بهم اطلاع دادید. الان کاملا درست داره انجامش میده.
@ali.bayat