点击时动态按钮不起作用 - Javascript

时间：2018-01-02 20:34:04

标签： javascript html button

我可以动态创建删除按钮，但我为其设置的操作无法正确执行。我试图一次删除一个项目。我必须只使用JavaScript，我不能编辑HTML，但我已经为它提供了代码，因此可以进行测试。任何提示都会有所帮助。 

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>

4 个答案:

答案 0 :(得分：3)

问题是删除所有ul元素的remove函数，应该获取当前单击元素的相关父元素，如：

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

代码：

＆＃13;
＆＃13; 
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;
  }
}
＆＃13; 
.debug {
  font-family: monospace;
  border: 1px solid black;
  padding: 10px;
  display: none;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

正如其他人都提到的那样，element.remove()函数会从DOM中删除该元素而不是子元素作为参数。您可以简单地告诉item在您的示例中使用item.remove()或从您获取父元素的任何其他建议中删除DOM，然后执行parent.removeChild(item)。在您的情况下，第一种方法的好处是您已经拥有了item，因此不需要获取父项，因为remove是一种可能在旧版浏览器中不可用的快捷方式。

其次我不建议您使用setAttribute设置onclick事件，因为它与某些旧版浏览器不兼容，并且有点hacky。

更合适的方法是使用onclick = function，如果您只想添加一个函数，或者在更复杂的情况下使用addEventListener("click", function)（attachEvent在非常旧的IE中）需要添加多个事件才能触发的情况。

＆＃13;
＆＃13; 
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;
  }
}
＆＃13; 
.debug {
  font-family: monospace;
  border: 1px solid black;
  padding: 10px;
  display: none;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

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

这需要一个ID，但仅使用事件引用进行调用：

remove.onclick = removeItem;

我建议保留调用部分并编辑removeItem函数：

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

答案 3 :(得分：0)

在removeItem函数

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

将行更改为 ul.removeChild（item）;

<强>顺便说一句

我建议您编写除您定义的函数之外的任何代码 一个在窗口加载后出现的函数.. （您尝试访问尚未创建的dom元素） 

 document.addEventListener('DOMContentLoaded', function()

//旁注 - 记住定义任何变量是根据您希望它们知道的范围的范围

相关问题
最新问题