Question

我可以动态创建删除按钮，但我为其设置的操作无法正确执行。我试图一次删除一个项目。我必须只使用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>

Answer 1

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

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

代码：

＆＃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;

Answer 2

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

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

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

＆＃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;

Answer 3

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); 
}

Answer 4

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

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

<强>顺便说一句

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

document.addEventListener('DOMContentLoaded', function()

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

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

4 个答案: