createBtns
函数创建的按钮数量与data
数组长一样。
我想做的是单击我们的按钮(从DOM中)删除。问题是所有按钮都具有相同的类,它们都相同,除了每个按钮内部的文本值。应该有一种方法可以知道单击了哪个按钮并将其删除,只有一个按钮可以删除,但我不知道。
应该执行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();
答案 0 :(得分:1)
如果您使用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之类的东西-仍然可以使用,但是要难看得多)
答案 1 :(得分:1)
您可以按照以下步骤进行操作:
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>
答案 2 :(得分:1)
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();
答案 3 :(得分:0)
您可以尝试向按钮添加事件,如下所示:
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>
答案 4 :(得分:0)
从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();