Удалить конкретную кнопку (из DOM) по нажатию - PullRequest
Новая
       37

Удалить конкретную кнопку (из DOM) по нажатию

0 голосов
/ 31 декабря 2018

DEMO

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

Ответы [ 5 ]

0 голосов
/ 31 декабря 2018 
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?

edit: (из комментариев)

И если бы я хотел также обновить массив данныхкак бы это выглядело?Я имею в виду удаление объекта из данных, когда кнопка исчезает

При этом я могу думать о двух видах подхода: первый - встраивать данные в кнопку 

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();
0 голосов
/ 31 декабря 2018

Обновление

удаление btn из DOM вместо изменения 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();
0 голосов
/ 31 декабря 2018

Если вы используете 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 - все еще работает, но это намного страшнее)

0 голосов
/ 31 декабря 2018

Вы можете сделать это, как показано ниже: 

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

Обновленная версия ваше демо : 

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>
0 голосов
/ 31 декабря 2018

Вы можете попробовать добавить событие к кнопке, например так: 

 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>
...