Unable to delete a dynamically inserted <select> element by using the removeChild method

Question

Unable to delete a dynamically inserted <select> element by using the removeChild method

As someone who is new to coding web applications, I am currently working on a project that involves adding and deleting dropdowns dynamically.

Unfortunately, I have run into an issue where the delete function does not work when the button is pressed.

Here is the code I am using:

var selectionCounter = 0;

function cloneSelect() {
  var select = document.getElementById("List");
  var clone = select.cloneNode(true);
  var name = select.getAttribute("name") + selectionCounter++;
  clone.id = name;
  clone.setAttribute("name", name);
  document.getElementById("selectContainer").appendChild(clone)
}
function deleteSelect() {                                                          
var select = document.getElementById("roomList");                              
var existingNode = select.cloneNode(true);                                     
var name = select.getAttribute("name") + selectionCounter--;                   
document.getElementById("selectContainer").parentNode.removeChild(existingNode)
}

<div id="selectContainer">
  <select id="List" name="List" required>
    <option>Populated by php<option>        
  </select>
</div>
<button onclick="cloneSelect()"  type="submit" class="button">Add Room</button>
<button onclick="deleteSelect()"  type="submit" class="button" >Delete Room</button>

javascript html css removechild

Answer 1

Answer №1

Change the type of buttons to actual buttons instead of submit
Avoid deleting a clone element.

var counter = 0;

function duplicateSelection() {
  var selectElement = document.getElementById("List");
  var clonedSelect = selectElement.cloneNode(true);
  var nameAttribute = selectElement.getAttribute("name") + counter++;
  clonedSelect.id = nameAttribute;
  clonedSelect.setAttribute("name", nameAttribute);
  document.getElementById("selectContainer").appendChild(clonedSelect)
}

function removeSelection() {
  counter--;
  var selected = document.getElementById("List"+(counter));
  if (selected) document.getElementById("selectContainer").removeChild(selected);
}

<div id="selectContainer">
  <select id="List" name="List" required>
    <option>Content inserted by PHP<option>        
  </select>
</div>
<button onclick="duplicateSelection()" type="button" class="button">Add Selection</button>
<button onclick="removeSelection()" type="button" class="button">Remove Selection</button>

Answer 2

Change the type of buttons to actual buttons instead of submit
Avoid deleting a clone element.

var counter = 0;

function duplicateSelection() {
  var selectElement = document.getElementById("List");
  var clonedSelect = selectElement.cloneNode(true);
  var nameAttribute = selectElement.getAttribute("name") + counter++;
  clonedSelect.id = nameAttribute;
  clonedSelect.setAttribute("name", nameAttribute);
  document.getElementById("selectContainer").appendChild(clonedSelect)
}

function removeSelection() {
  counter--;
  var selected = document.getElementById("List"+(counter));
  if (selected) document.getElementById("selectContainer").removeChild(selected);
}

<div id="selectContainer">
  <select id="List" name="List" required>
    <option>Content inserted by PHP<option>        
  </select>
</div>
<button onclick="duplicateSelection()" type="button" class="button">Add Selection</button>
<button onclick="removeSelection()" type="button" class="button">Remove Selection</button>

Answer 3

Answer №2

When it comes to the deleteSelect() method, you are currently cloning the node instead of targeting the existing one for removal.

//Create a valid id
var name = select.getAttribute("name") + --selectionCounter;
//Target the element
var clone = document.getElementById(name);
//Remove the element
clone.parentNode.removeChild(clone);

Furthermore, remember to set your buttons' type attribute to "button".

var selectionCounter = 0;

function cloneSelect() {
  var select = document.getElementById("List");
  var clone = select.cloneNode(true);
  var name = select.getAttribute("name") + selectionCounter++;
  clone.id = name;
  console.log(name)
  clone.setAttribute("name", name);
  document.getElementById("selectContainer").appendChild(clone)
}

function deleteSelect() {
  var select = document.getElementById("List");
  //Create a valid id
  var name = select.getAttribute("name") + --selectionCounter;
  //Target the element
  var clone = document.getElementById(name)
  clone.parentNode.removeChild(clone)
}

<div id="selectContainer">
  <select id="List" name="List" required>
    <option>Populated by php<option>        
  </select>
</div>
<button onclick="cloneSelect()"  type="button" class="button">Add Room</button>
<button onclick="deleteSelect()"  type="button" class="button" >Delete Room</button>

Answer 4

When it comes to the deleteSelect() method, you are currently cloning the node instead of targeting the existing one for removal.

//Create a valid id
var name = select.getAttribute("name") + --selectionCounter;
//Target the element
var clone = document.getElementById(name);
//Remove the element
clone.parentNode.removeChild(clone);

Furthermore, remember to set your buttons' type attribute to "button".

var selectionCounter = 0;

function cloneSelect() {
  var select = document.getElementById("List");
  var clone = select.cloneNode(true);
  var name = select.getAttribute("name") + selectionCounter++;
  clone.id = name;
  console.log(name)
  clone.setAttribute("name", name);
  document.getElementById("selectContainer").appendChild(clone)
}

function deleteSelect() {
  var select = document.getElementById("List");
  //Create a valid id
  var name = select.getAttribute("name") + --selectionCounter;
  //Target the element
  var clone = document.getElementById(name)
  clone.parentNode.removeChild(clone)
}

<div id="selectContainer">
  <select id="List" name="List" required>
    <option>Populated by php<option>        
  </select>
</div>
<button onclick="cloneSelect()"  type="button" class="button">Add Room</button>
<button onclick="deleteSelect()"  type="button" class="button" >Delete Room</button>

Answer 5

Answer №3

To access the most recently added <select> element, you can use container.lastElementChild. Here, container represents the <div id="selectContainer"> element:

var counter = 0
var container = document.getElementById("selectContainer")
var select = document.getElementById("List")

function cloneSelect() {
  var clone = select.cloneNode(true)
  clone.id = clone.name = (select.name + counter++)
  container.appendChild(clone)
}

function deleteSelect() {
  if (counter) {
    counter--
    container.removeChild(container.lastElementChild)
  }
}

<div id="selectContainer">
  <select id="List" name="List" required>
    <option>Populated by php<option>        
  </select>
</div>
<button onclick="cloneSelect()" type="submit" class="button">Add Room</button>
<button onclick="deleteSelect()" type="submit" class="button">Delete Room</button>

Answer 6

To access the most recently added <select> element, you can use container.lastElementChild. Here, container represents the <div id="selectContainer"> element:

var counter = 0
var container = document.getElementById("selectContainer")
var select = document.getElementById("List")

function cloneSelect() {
  var clone = select.cloneNode(true)
  clone.id = clone.name = (select.name + counter++)
  container.appendChild(clone)
}

function deleteSelect() {
  if (counter) {
    counter--
    container.removeChild(container.lastElementChild)
  }
}

<div id="selectContainer">
  <select id="List" name="List" required>
    <option>Populated by php<option>        
  </select>
</div>
<button onclick="cloneSelect()" type="submit" class="button">Add Room</button>
<button onclick="deleteSelect()" type="submit" class="button">Delete Room</button>

Unable to delete a dynamically inserted <select> element by using the removeChild method

Answer №1

Answer №2

Answer №3

Similar questions

Receive information from a form and store it in an array

Press one button to activate another button

Displaying information collected from a submission form

Sequelize is unable to retrieve a table from the database

Pass an array from JavaScript to PHP

Clicking on "Ng-Click" will add a fresh row to the table using Angular

"Transforming a static navbar to a fixed position causes the page to jump

jqGrid is throwing an error: undefined is not recognized as a function

What is the process for enabling HTMLField in Django Admin and ensuring it is accurately displayed on the template?

socket.io establishes several sockets for each connection

Customize the font color in Material UI to make it uniquely yours

Transform an array of objects into a nested tree structure with Javascript

Using a Hook inside a React function is not possible

Advantages of using index.js within a component directory

Personalized parameters in communication for Quickblox's JavaScript

PHP and MySQL with jQuery and AJAX combine to create a real-time news feed update system similar to Twitter

What is the best approach to link an HTML document to a MySQL Workbench server utilizing JavaScript, Ajax, and PHP?

What is the correct method for formatting text spacing?

The jQuery form submission functionality fails to execute properly in the presence of a callback function

Center the p tag vertically