JS将child附加到类的每个元素

Question

function makeCategory() {
    getList = document.getElementById("list");
    cat = document.createElement("div");
    cat.setAttribute("class", "cat");
    getList.appendChild(cat);
    cat.innerHTML =
        '<input type="text" name="name"/><span class="removeButton" onclick= "remove(this)">-</span><br><span class="makeSubCat" onclick="makeSubCategory(this)">+Category</span>';
}

function remove(z) {
    document.getElementById("list").removeChild(z.parentNode);
}

function makeSubCategory(i) {
    y = document.createElement("input");
    x = document.getElementsByClassName("cat");
    x[i].appendChild(y);
}

无法弄清楚我如何使用“onclick”将孩子附加到班级的每个元素上。它不适用于“for循环” - 它总是附加到最新的div。它仅在我指定类元素的数量时才有效。

Answer 1

演示大纲

• 将HTML标记重写为真实的描述列表或<dl>
• 我们不会尝试递归操作多个元素，而是通过click事件
来驱动函数
• 使用Event Delegation为我们节省了大量额外代码。无限数量的eventListener()和<button>只需要一个<input>。
• Template Literal用于代替字符串文字
• insertAdjacentHTML()扮演了add()函数
的重要角色

详情在演示

中发表

演示

// Reference the Description List dl#list
var dock = document.getElementById("list");

/* Callback function
|| if the clicked button is NOT dl#list...
|| - tgt/e.target is the clicked <button>
|| - if tgt has .add, then call add()...
|| else if tgt has .rem...
|| cat is its parent (.cat)
|| - Get div.cat parent and remove .cat
*/
function mod(e, dock) {
  if (e.target !== e.currentTarget) {
    var tgt = e.target;
    if (tgt.className === 'add') {
      add.call(this, dock);
    } else if (tgt.className === 'rem') {
      var cat = tgt.parentNode;
      cat.parentNode.removeChild(cat);
    } else return;
  }
}

/* Register the ancestor of all of the .cat
|| and <button>s. (dl#list).
|| By doing this there's no need to addEventListeners
|| for every <button>
*/
dock.addEventListener('click', function(e) {
  mod(e, this);
}, false);

/* This function expression takes a string (in this
|| case the string is a Template Literal.) and
|| parses it into HTML as it inserts it at a 
|| position determined by the first parameter:
|| "beforeend" 
|| (exactly like append)
*/
var add = function(dock) {
  var cat = `<dd class='cat'>
              <input name="name" type='text'>
              <button class="rem">-</button>
              <button class="add">+</button>
             </dd>`;
  dock.insertAdjacentHTML('beforeend', cat);
};

#list {
  margin: 20px;
  border: 2px ridge gold;
  background: rgba(0, 0, 0, .3);
  padding: 5px 10px 15px;
}

dt {
  font: 700 20px/1 Consolas;
  color: gold;
  background: rgba(0, 0, 0, .5);
  padding: 5px;
}

dd {
  font-size: 16px;
  color: #fff;
  background: rgba(0, 0, 0, .5);
  padding: 5px;
  margin: 8px 4px 8px 0;
}

input,
button {
  width: 10%;
  font: inherit;
  display: inline-block;
}

input[type='text'] {
  width: 76%;
}

<dl id='list'>

  <dt>Category List</dt>

  <dd class='cat'>
    <input name="name" type='text'>
    <button class="add">+</button>
  </dd>

</dl>