"For .. of" লুপের সাহায্যে ভ্যানিলা জাভাস্ক্রিপ্টে নির্বাচন ট্যাগ থেকে বিকল্পগুলি সরিয়ে ফেলা হচ্ছে

Question

নির্বাচন থেকে বিকল্পগুলি অপসারণ করার চেষ্টা করার সময়, সবসময় একটি বাকী থাকে, কেন?

<select id="form-select">   
<option>111</option>
<option>222</option>
<option>333</option>
</select>

এই জেএস কাজ করছে না:

var t = document.querySelector('#form-select'); 
for(var i of t.options) {
      t.remove(i.index)
    }

এবং এটিও কাজ করছে না:

for(var i of document.querySelector('#form-select').options) {
  i.remove()
}

আমি জানি যে এটি অর্জনের জন্য অন্যান্য সমাধান রয়েছে, তবে আমি বুঝতে চাই এটি কেন এটি অনুমিত হিসাবে কাজ করছে না

Answer 1

.optionsসংগ্রহ (দুর্ভাগ্যবশত) লাইভ , তাই লাইভ সংগ্রহ এর আইটেম উপর iterating এক-বাই-এক এবং .removeপ্রতি এক যে অদ্ভুত এক পরিণাম ডেকে আনবে ing রাখা হচ্ছে। (উদাহরণস্বরূপ, আপনি যখন প্রথম আইটেমটি সরিয়ে ফেলবেন ঠিক তখনই [0]সংগ্রহের তম আইটেমটি সংগ্রহের পরবর্তী আইটেমটি হয়ে যাবে - যা ব্যবহৃত হত [1]তা হয়ে যাবে [0](এবং তারপরে আপনি পরবর্তী সূচীতে একবার অবস্থানের [1]পরে নতুন আইটেমটি অবস্থান করবেন) 0 এর উপরে পুনরাবৃত্তি হবে না)

document.querySelectorAllপরিবর্তে ব্যবহার করুন, যা স্থিতিশীল একটি সংগ্রহ প্রদান করে:

for (const option of document.querySelectorAll('#form-select > option')) {
  option.remove();
}

<select id="form-select">
  <option>111</option>
  <option>222</option>
  <option>333</option>
</select>

উপাদানগুলি সরানোর আগে আপনি একটি (স্থিতিশীল) অ্যারেতেও ছড়িয়ে দিতে পারেন ::

for (const option of [...document.querySelector('#form-select').options]) {
  option.remove();
}

<select id="form-select">
  <option>111</option>
  <option>222</option>
  <option>333</option>
</select>

আর একটি বিকল্প যা কেবলমাত্র কাজটি ঘটায় কারণ সংগ্রহটি লাইভ (তবে সম্ভবত এটি ব্যবহার করা উচিত নয়, কারণ এটি স্বজ্ঞাত নয়):

const { options } = document.querySelector('#form-select');
while (options.length) {
  options[0].remove();
}

<select id="form-select">
  <option>111</option>
  <option>222</option>
  <option>333</option>
</select>

Answer 2

আপনি একটি অ্যারে থেকে আইটেমগুলি সরাচ্ছেন করছি যেমন আপনি অ্যারে মাধ্যমে পুনরুক্তি। সুতরাং তোমার আছে:

["one","two","three"]

তারপরে আপনি সূচক 0-এ আইটেমটি সরিয়ে ফেলুন, যা "এক," আপনাকে রেখে যাবে:

["two","three"]

এরপরে আপনি সূচক 1 এ আইটেমটি সরিয়ে ফেলবেন, যা "তিনটি" রয়েছে যা আপনাকে রেখে চলেছে:

["two"]

সূচক 2 তে কোনও আইটেম নেই, তাই লুপটি বন্ধ হয়ে যায়।

পরিবর্তে বিপরীতে অ্যারের মাধ্যমে ইটারেট করুন:

const t = document.querySelector("#form-select")

for (let i = t.options.length-1; i >= 0; i--) {
  t.removeChild(t.options[i])
}

<select id="form-select">
  <option>111</option>
  <option>222</option>
  <option>333</option>
</select>

Comments

.optionsহয় না একটি অ্যারের, যা সমস্যা উৎস - বরং, এটি একটি HTMLCollection, যা লাইভ না। এটি যদি অ্যারে হত তবে এটি স্থির ছিল, এবং কোনও সমস্যা হবে না।

— পারফরম্যান্স 25'19

একটি অ্যারের থেকে উপাদানগুলি মুছে ফেলার হিসাবে আপনি পুনরুক্তি মাধ্যমে এটি @CertainPerformance করে সমস্যা আমি সচিত্র থাকেন কারণ।

— সিমবলিক লিঙ্ক

@CaretainPerformance একটি HTMLOptionsCollectionঅবজেক্ট এই প্রসঙ্গে অ্যারের মতো কাজ করে acts

— সিমবলিক লিঙ্ক

Answer 3

আমি দেখতে পাচ্ছি যে আপনার মূল লক্ষ্যটি এমন প্রক্রিয়াটি বোঝা যা এর ফলে ঘটে, তাই এটি আপনার পক্ষে সমস্যাটি তুলে ধরা উচিত:

var arr = ["one", "two", "three", "four", "five", "six"];

for(var i = 0; i < arr.length; i++){
	console.log("i is " + i + ", so we are removing \"" + arr[i] + "\" from " + JSON.stringify(arr) + ".");
	arr.splice(i, 1);
	console.log("After that removal, the array is " + JSON.stringify(arr) + ". We'll now iterate i to " + (i + 1) + " and continue the loop.");
}
console.log("i is too high to grab a value from the array, so we're finished. We're left with " + JSON.stringify(arr) + ".");

এই লুপটি ঠিক একই ধরণের প্রক্রিয়াটির মধ্য দিয়ে যায় যা আপনার "for .. এর" লুপটি আপনাকে চূড়ান্ত ফলাফলের অতিরিক্ত হিসাবে ছেড়ে দেয়। সমস্যাটি হ'ল এটি নিজের সূচকগুলি ধ্বংস করে দিচ্ছে যেহেতু এটিগুলির মধ্য দিয়ে এটি পুনরাবৃত্তি করে, ফলে এই মানটি যা iসত্যই উল্লেখ করা হচ্ছে তা পরিবর্তন করে । আমি যখন এই সমস্যার মুখোমুখি হচ্ছি তখন আমি অ্যারের মধ্য দিয়ে লুপ করতে চাই পিছনের দিকে তাই আমি আমার নিজের ধ্বংস দ্বারা আক্রান্ত হই না, যেমন:

var arr = ["one", "two", "three", "four", "five", "six"];

for(var i = arr.length - 1; i >= 0; i--){
	console.log("i is " + i + ", so we are removing \"" + arr[i] + "\" from " + JSON.stringify(arr) + ".");
	arr.splice(i, 1);
	console.log("After that removal, the array is " + JSON.stringify(arr) + ". We'll now iterate i to " + (i - 1) + " and continue the loop.");
}
console.log("i is too low to grab a value from the array, so we're finished. We're left with " + JSON.stringify(arr) + ".");

আমি আশা করি এটি এখানে আপনাকে কী ঘটছে তা পুরোপুরি বুঝতে সহায়তা করে। আপনার যদি কোনও প্রশ্ন থাকে তবে নির্দ্বিধায় আমাকে কোন মন্তব্য করবেন না।

Answer 4

আপনি একই অ্যারে দিয়ে লুপিং করছেন যেখানে একবার অ্যারে থেকে আইটেমটি সরিয়ে ফেলা হলে সূচি পরিবর্তন হয়। নীচে নমুনা দেওয়া হয়েছে যেখানে আপনি সূচি ছাড়াই বিকল্পগুলি লুপ করতে এবং অ্যারে থেকে এটিকে সরাতে পারেন।

var selectOptions = document.querySelectorAll('#remove-option>option');
selectOptions.forEach(function(selectOption) {
  selectOption.remove();
  selectOption = null;
});

এই হৈচৈ