Dynamic button not working when clicked on - Javascript

Question

I am able to create the delete button dynamically, but the action that I have set for it doesn't execute correctly. I am trying to delete one item at a time. I have to only use JavaScript and I can not edit the HTML, but I have provided the code for it, so it can be tested. Any tips would be helpful.

var form = document.getElementsByTagName("form")[0];
form.method = "POST";
form.action = "form-handler";
form.onsubmit = validateForm;


var add = document.getElementsByClassName('add');
add[0].onclick = houseList;
var lastId = 0;


var age = document.getElementsByName("age")[0];
age.type = "number";
age.required = true;
age.min = "0";
age.max = "120";

var dropDown = document.getElementsByName("rel")[0];
dropDown.type = "option";
dropDown.required = true;

var newDiv = document.createElement("div");
newDiv.setAttribute("id", "houseMem");
document.body.appendChild(newDiv);

//var title = document.createElement("h2");
//title = "Member List";
//newDiv.appendChild(title);*

var ul = document.createElement("ul");
ul.setAttribute("id", "memList");
newDiv.appendChild(ul);


function houseList() {

  var li = document.createElement("li"); 
  li.appendChild(document.createTextNode(dropDown.value + ' ' + age.value + " ")); 
  li.setAttribute('id', 'item' + lastId);
  ul.appendChild(li);


  var remove = document.createElement('button'); 
  remove.appendChild(document.createTextNode("delete")); 
  remove.onclick = removeItem;
  // remove.setAttribute('onclick', 'removeItem()');
  remove.setAttribute('onclick', 'removeItem("' + 'item' + lastId + '")');

  li.appendChild(remove);
  lastId += 1;
  ul.appendChild(li);

  return false;

}

function removeItem(itemid) { 
  var item = document.getElementById(itemid);
  ul.remove(item); 
}

function validateForm() {

  if (age == null || age.value === "") {
    alert("Age must be filled out");
    return false;
  } else if (dropDown.value == null) {
    alert("Please choose a relationship");
    return false;
  } else {
    alert("You entered: " + age.value + " and selected: " + dropDown.value);
    return addToList;
  }
}

.debug {
  font-family: monospace;
  border: 1px solid black;
  padding: 10px;
  display: none;
}

<title>Household builder</title>

</head>

<body>
  <h1>Household builder</h1>
  <div class="builder">
    <o class="household"></o>
    <form>
      <div>
        <label>Age
                        <input type="text" name="age">
                    </label>
      </div>
      <div>
        <label>Relationship
                        <select name="rel">
                            <option value="">---</option>
                            <option value="self">Self</option>
                            <option value="spouse">Spouse</option>
                            <option value="child">Child</option>
                            <option value="parent">Parent</option>
                            <option value="grandparent">Grandparent</option>
                            <option value="other">Other</option>
                        </select>
                    </label>
      </div>
      <div>
        <label>Smoker?
                        <input type="checkbox" name="smoker">
                    </label>
      </div>
      <div>
        <button class="add">add</button>
      </div>
      <div>
        <button type="submit" class="GapViewItemselected">submit</button>
      </div>
    </form>
  </div>
  <pre class="debug"></pre>
  <script type="text/javascript" src="./index.js"></script>
</body>

Is it possible to reduce your question some what? It’s rather long and I’m wondering if all of it is relevant. — dǝɥɔS ʇoıןןƎ
– dǝɥɔS ʇoıןןƎ, Commented Jan 2, 2018 at 20:40

halfer · Accepted Answer · 2018-01-16 15:06:26Z

The problem is the remove function that will remove all the ul elements, should get the related parent of the current clicked element like :

function removeItem(itemid) { 
    var item = document.getElementById(itemid);
    item.parentNode.removeChild(item);
}

Code:

var form = document.getElementsByTagName("form")[0];
form.method = "POST";
form.action = "form-handler";
form.onsubmit = validateForm;


var add = document.getElementsByClassName('add');
add[0].onclick = houseList;
var lastId = 0;


var age = document.getElementsByName("age")[0];
age.type = "number";
age.required = true;
age.min = "0";
age.max = "120";

var dropDown = document.getElementsByName("rel")[0];
dropDown.type = "option";
dropDown.required = true;

var newDiv = document.createElement("div");
newDiv.setAttribute("id", "houseMem");
document.body.appendChild(newDiv);

//var title = document.createElement("h2");
//title = "Member List";
//newDiv.appendChild(title);*

var ul = document.createElement("ul");
ul.setAttribute("id", "memList");
newDiv.appendChild(ul);


function houseList() {

  var li = document.createElement("li"); 
  li.appendChild(document.createTextNode(dropDown.value + ' ' + age.value + " ")); 
  li.setAttribute('id', 'item' + lastId);
  ul.appendChild(li);


  var remove = document.createElement('button'); 
  remove.appendChild(document.createTextNode("delete")); 
  remove.onclick = removeItem;
  // remove.setAttribute('onclick', 'removeItem()');
  remove.setAttribute('onclick', 'removeItem("' + 'item' + lastId + '")');

  li.appendChild(remove);
  lastId += 1;
  ul.appendChild(li);

  return false;

}

function removeItem(itemid) { 
  var item = document.getElementById(itemid);
  item.parentNode.removeChild(item);
}

function validateForm() {

  if (age == null || age.value === "") {
    alert("Age must be filled out");
    return false;
  } else if (dropDown.value == null) {
    alert("Please choose a relationship");
    return false;
  } else {
    alert("You entered: " + age.value + " and selected: " + dropDown.value);
    return addToList;
  }
}

.debug {
  font-family: monospace;
  border: 1px solid black;
  padding: 10px;
  display: none;
}

<h1>Household builder</h1>
<div class="builder">
  <o class="household"></o>
  <form>
    <div>
      <label>Age<input type="text" name="age"></label>
    </div>
    <div>
      <label>Relationship
          <select name="rel">
              <option value="">---</option>
              <option value="self">Self</option>
              <option value="spouse">Spouse</option>
              <option value="child">Child</option>
              <option value="parent">Parent</option>
              <option value="grandparent">Grandparent</option>
              <option value="other">Other</option>
          </select>
        </label>
    </div>
    <div>
      <label>Smoker?<input type="checkbox" name="smoker"></label>
    </div>
    <div>
      <button class="add">add</button>
    </div>
    <div>
      <button type="submit" class="GapViewItemselected">submit</button>
    </div>
  </form>
</div>
<pre class="debug"></pre>

Thank you very much. Your tip helped! I was unaware that I could use parentNode...I thought it was referring to ul. Thanks again!

crapier · Accepted Answer · 2018-01-02 21:46:49Z

As everyone else has mentioned the element.remove() function removes that element from the DOM not the child as a parameter. You can simply tell the item to remove itself from the DOM with item.remove() in your example or any of the other suggestions where you get the parent element and then do parent.removeChild(item). The benefit of the first method in your case is that you already have item, so there is no need to get the parent where as remove is a shortcut that might not be available in older browsers though.

Second I would not recommend setting your onclick event with setAttribute as that isn't compatible with some older browsers and is kinda hacky.

A more proper way to to this is with the onclick = functionif you only want to add one function the event or the addEventListener("click", function) (attachEvent in very old IE) used in more complicated cases where you need to add multiple events to fire.

var form = document.getElementsByTagName("form")[0];
form.method = "POST";
form.action = "form-handler";
form.onsubmit = validateForm;


var add = document.getElementsByClassName('add');
add[0].onclick = houseList;
var lastId = 0;


var age = document.getElementsByName("age")[0];
age.type = "number";
age.required = true;
age.min = "0";
age.max = "120";

var dropDown = document.getElementsByName("rel")[0];
dropDown.type = "option";
dropDown.required = true;

var newDiv = document.createElement("div");
newDiv.setAttribute("id", "houseMem");
document.body.appendChild(newDiv);

//var title = document.createElement("h2");
//title = "Member List";
//newDiv.appendChild(title);*

var ul = document.createElement("ul");
ul.setAttribute("id", "memList");
newDiv.appendChild(ul);

function deleteFunction(item) {
  return function(event) {removeItem(item)};
}

function houseList() {

  var li = document.createElement("li"); 
  li.appendChild(document.createTextNode(dropDown.value + ' ' + age.value + " ")); 
  li.setAttribute('id', 'item' + lastId);
  ul.appendChild(li);


  var remove = document.createElement('button'); 
  remove.appendChild(document.createTextNode("delete")); 
  remove.onclick = deleteFunction('item' + lastId);

  li.appendChild(remove);
  lastId += 1;
  ul.appendChild(li);

  return false;

}

function removeItem(itemid) { 
  var item = document.getElementById(itemid);
  item.remove(); 
}

function validateForm() {

  if (age == null || age.value === "") {
    alert("Age must be filled out");
    return false;
  } else if (dropDown.value == null) {
    alert("Please choose a relationship");
    return false;
  } else {
    alert("You entered: " + age.value + " and selected: " + dropDown.value);
    return addToList;
  }
}

.debug {
  font-family: monospace;
  border: 1px solid black;
  padding: 10px;
  display: none;
}

<title>Household builder</title>

</head>

<body>
  <h1>Household builder</h1>
  <div class="builder">
    <o class="household"></o>
    <form>
      <div>
        <label>Age
                        <input type="text" name="age">
                    </label>
      </div>
      <div>
        <label>Relationship
                        <select name="rel">
                            <option value="">---</option>
                            <option value="self">Self</option>
                            <option value="spouse">Spouse</option>
                            <option value="child">Child</option>
                            <option value="parent">Parent</option>
                            <option value="grandparent">Grandparent</option>
                            <option value="other">Other</option>
                        </select>
                    </label>
      </div>
      <div>
        <label>Smoker?
                        <input type="checkbox" name="smoker">
                    </label>
      </div>
      <div>
        <button class="add">add</button>
      </div>
      <div>
        <button type="submit" class="GapViewItemselected">submit</button>
      </div>
    </form>
  </div>
  <pre class="debug"></pre>
  <script type="text/javascript" src="./index.js"></script>
</body>

Ryan Hanekamp · Accepted Answer · 2018-01-02 21:07:22Z

0

function removeItem(itemid) { 
  var item = document.getElementById(itemid);
  ul.remove(item); 
}

This requires an ID, but is called with only an event reference:

remove.onclick = removeItem;

I'd suggest keeping the calling part and editing the removeItem function:

function removeItem(event) { 
  var item = event.target;
  item.parentNode.remove(item); 
}

answered Jan 2, 2018 at 21:07

Ryan Hanekamp

6386 silver badges6 bronze badges

Comments

Ofir G · Accepted Answer · 2018-01-04 22:13:27Z

0

in the removeItem function

 function removeItem(itemid) { 
   var item = document.getElementById(itemid);
   ul.remove(item);  // HERE
 }

change the line to ul.removeChild(item);

BTW

i suggest you to write any code that outside the functions you defined, in a function that caled after the window as been loaded .. (you trying access a dom elements that has not been created yet)

 document.addEventListener('DOMContentLoaded', function()

// side note - remember to define any variables is a scope according to the range you want them to be known

edited Jan 4, 2018 at 22:13

answered Jan 2, 2018 at 21:24

Ofir G

7646 silver badges19 bronze badges

Collectives™ on Stack Overflow

Dynamic button not working when clicked on - Javascript

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related