单击时删除特定按钮（来自 DOM）

Question

createBtns 函数创建与 data 数组一样多的按钮。

我想要做的是在我们点击它时删除（从DOM）单个按钮。问题是所有按钮都具有相同的 class，它们都是相同的，除了每个按钮内的文本值。应该有一种方法可以知道点击了哪个按钮并删除了这个而且只有一个，但我不知道。

有 btnClick 函数可以执行此操作（它现在会发出警报）。

var data = [
  {name: "Date", value: "12/31/2018", type: "visible"},
  {name: "Car", value: "Ford", type: "visible"},
  {name: "Country", value: "Russia", type: "visible"},
  {name: "Age", value: "20", type: "visible"},
];

var outer = $(".outerPanel");

var createBtns = () => {
    for (var i = 0; i < data.length; i++) {
    var btn = $('<div class="btn"></div>');
    var name = data[i].name;
    var value = data[i].value;

    btn.html(name + ": " + value);
    btn.click(() => btnClick());
    outer.append(btn);
  }
}

var btnClick = () => {
    alert("test");
}

createBtns();

Answer 1

您可以尝试向按钮添加一个事件，如下所示：

 function addHideEvent(element) { 
                     
 for(i=0;i<element.length;i++) { 
  element[i].onclick = function(e) { 
   this.remove()
  }
 }
}
                
addHideEvent(document.getElementsByClassName("btn"))

<button class="btn"> CLICK HERE </button>  </br>
<button class="btn"> CLICK HERE </button>  </br>
<button class="btn"> CLICK HERE </button>  </br>
<button class="btn"> CLICK HERE </button>  </br>

Answer 2

如果您使用 const 和 let（块作用域而不是函数作用域），您可以简单地在处理程序中再次引用创建的 btn 并 .remove() 它在闭包中：

btn.click(() => btn.remove());

const data = [
 {name: "Date", value: "12/31/2018", type: "visible"},
  {name: "Car", value: "Ford", type: "visible"},
  {name: "Country", value: "Russia", type: "visible"},
  {name: "Age", value: "20", type: "visible"},
];

const outer = $(".outerPanel");

const createBtns = () => {
 for (let i = 0; i < data.length; i++) {
    const btn = $('<div class="btn"></div>');
    const name = data[i].name;
    const value = data[i].value;

    btn.html(name + ": " + value);
    btn.click(() => btn.remove());
    outer.append(btn);
  }
}

createBtns();

.outerPanel {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.btn {
  width: 20%;
  height: 40px;
  border: 2px solid red;
  text-align: center;
  vertical-align: center;
  cursor: pointer;
}

.btn:hover {
  background: black;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outerPanel"></div>

（如果没有 const 和 let，您必须使用 this 之类的东西来代替 - 仍然有效，但更难看）

Answer 3

您可以像下面这样操作：

var btnClick = (e) => {
    // get index of clicked button relative to parent element
    var index = Array.prototype.indexOf.call(e.target.parentNode.children, e.target);
    // remove data entry in array
    data.splice(index, 1);
    // remove the clicked button
    e.target.parentNode.removeChild(e.target);
}

your demo 的更新版本：

var data = [{
        name: "Date",
        value: "12/31/2018",
        type: "visible"
    },
    {
        name: "Car",
        value: "Ford",
        type: "visible"
    },
    {
        name: "Country",
        value: "Russia",
        type: "visible"
    },
    {
        name: "Age",
        value: "20",
        type: "visible"
    },
];

var outer = $(".outerPanel");

var createBtns = () => {
    for (var i = 0; i < data.length; i++) {
        var btn = $('<div class="btn"></div>');
        var name = data[i].name;
        var value = data[i].value;

        btn.html(name + ": " + value);
        btn.click((e) => btnClick(e));
        outer.append(btn);
    }
}

var btnClick = (e) => {
    // get index of clicked button relative to parent element
    var index = Array.prototype.indexOf.call(e.target.parentNode.children, e.target);
    // remove data entry in array
    data.splice(index, 1);
    // refresh displayed text
    refreshText();
    // remove the clicked button
    e.target.parentNode.removeChild(e.target);
}

var refreshText = () => {
    document.getElementById("dataText").innerHTML = JSON.stringify(data);
}

createBtns();
refreshText();

.outerPanel {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.btn {
  width: 20%;
  height: 40px;
  border: 2px solid red;
  text-align: center;
  vertical-align: center;
  cursor: pointer;
}

.btn:hover {
  background: black;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outerPanel"></div>
<h3>Data array contents</h1>
<p id="dataText"></p>

Answer 4

更新

从 DOM 中删除 btn 而不是 CSS 更改

解决方案

当您在 for 循环中创建按钮时，您可以将事件侦听器添加到该按钮。

示例代码在这里：

var data = [{
    name: "Date",
    value: "12/31/2018",
    type: "button"
  },
  {
    name: "Car",
    value: "Ford",
    type: "button"
  },
  {
    name: "Country",
    value: "Russia",
    type: "button"
  },
  {
    name: "Age",
    value: "20",
    type: "button"
  },
];

const createBtns = () => {
  for (var i = 0; i < data.length; i++) {
    let btn = document.createElement('input');
    btn.setAttribute('class', 'btn');
    btn.setAttribute('value', data[i].value);
    btn.setAttribute('type', data[i].type);
    btn.addEventListener('click', () => {
      document.body.removeChild(btn)
    });
    document.body.appendChild(btn);
  }
}

createBtns();

Answer 5

var data = [
  {name: "Date", value: "12/31/2018", type: "visible"},
  {name: "Car", value: "Ford", type: "visible"},
  {name: "Country", value: "Russia", type: "visible"},
  {name: "Age", value: "20", type: "visible"},
];

var outer = $(".outerPanel");

var createBtns = () => {
    for (var i = 0; i < data.length; i++) {
    var btn = $('<div class="btn"></div>');
    var name = data[i].name;
    var value = data[i].value;

    btn.html(name + ": " + value);
    btn.click((e) => btnClick(e));
    outer.append(btn);
  }
}

var btnClick = (e) => {
    e.currentTarget.remove()
}

createBtns();

我假设 $ 是 JQuery?

编辑：（来自评论）

如果我还想更新数据数组，它会是什么样子？我的意思是当按钮消失时从数据中删除对象

对此我想到了两种做法，第一种是把数据嵌入到按钮中

var data = [
  {name: "Date", value: "12/31/2018", type: "visible"},
  {name: "Car", value: "Ford", type: "visible"},
  {name: "Country", value: "Russia", type: "visible"},
  {name: "Age", value: "20", type: "visible"},
];

var outer = $(".outerPanel");

var createBtns = () => {
    for (var i = 0; i < data.length; i++) {
    var btn = $('<div class="btn"></div>');
    btn[0].data = data[i];
    var name = data[i].name;
    var value = data[i].value;

    btn.html(name + ": " + value);
    btn.click((e) => btnClick(e));
    outer.append(btn);
  }
}

var btnClick = (e) => {
    var index = data.indexOf(e.currentTarget.data);
    data = data.slice(0,index).concat(data.slice(index+1,data.length));
    e.currentTarget.remove()
}

createBtns();

第二种方法就是删除数据并重新渲染整个东西

var data = [
  {name: "Date", value: "12/31/2018", type: "visible"},
  {name: "Car", value: "Ford", type: "visible"},
  {name: "Country", value: "Russia", type: "visible"},
  {name: "Age", value: "20", type: "visible"},
];

var outer = $(".outerPanel");

var createBtns = () => {
    for (var i = 0; i < data.length; i++) {
    var btn = $('<div class="btn"></div>');
    btn[0].data = data[i];
    var name = data[i].name;
    var value = data[i].value;

    btn.html(name + ": " + value);
    btn.click((e) => btnClick(e));
    outer.append(btn);
  }
}

var btnClick = (e) => {
    var index = data.indexOf(e.currentTarget.data);
    data = data.slice(0,index).concat(data.slice(index+1,data.length));
    outer[0].innerHTML = "";
    createBtns();
}

createBtns();

单击时删除特定按钮（来自 DOM）

Delete particular button (from DOM) on click

javascript

click

onclick

更新

解决方案

示例代码在这里：