При добавлении элементов и кнопок в div, как каждая кнопка может удалить себя? - PullRequest
1 голос
/ 07 ноября 2019

У меня есть скрипт, который может добавлять абзацы в div. В этих абзацах есть текст и кнопка удаления. Эта кнопка удаления должна быть в состоянии удалить абзац, включая его текст (поэтому удалите весь абзац), но это не так.

var elementCounter2 = 0;

function addElement2() {
  elementCounter2++;
  var p = document.createElement("p");
  var node = document.createTextNode("This is element number " + elementCounter2);
  p.setAttribute("id", "p" + elementCounter2);
  p.appendChild(node);
  p.innerHTML += ' <button id="del' + elementCounter2 + '" onclick="deleteElement2();">Delete this element.</button>';
  document.getElementById("elements2").appendChild(p);
}

function deleteElement2() {
  var p = document.getElementById("p" + elementCounter2);
  var btn = document.getElementById("del" + elementCounter2);

  //Button sees its own id and look for the corresponding p id, then deletes the paragraph.
}
.borderful {
  border: solid 1px black;
  margin: 10px;
  padding: 10px;
}
<div class="borderful">
  <p>Here is the second part</p>
  <p>You can add elements here.</p>
  <p>You can delete these aswell but differntly.</p>
  <button onclick="addElement2();">Add an element.</button>
  <div id="elements2"></div>
</div>

Ответы [ 3 ]

1 голос
/ 07 ноября 2019

Это должно работать

var elementCounter2 = 0;

function addElement2() {
  elementCounter2++;
  var p = document.createElement("p");
  var node = document.createTextNode("This is element number " + elementCounter2);
  p.setAttribute("id", "p" + elementCounter2);
  p.appendChild(node);
  p.innerHTML += ' <button id="del' + elementCounter2 + '" onclick="deleteElement2(this);">Delete this element.</button>';
  document.getElementById("elements2").appendChild(p);
}

function deleteElement2(caller) { 
  // caller = button
  document.getElementById("del" + caller.id.substr(3)).parentNode.remove();
}
.borderful {
  border: solid 1px black;
  margin: 10px;
  padding: 10px;
}
<div class="borderful">
  <p>Here is the second part</p>
  <p>You can add elements here.</p>
  <p>You can delete these aswell but differntly.</p>
  <button onclick="addElement2();">Add an element.</button>
  <div id="elements2"></div>
</div>
1 голос
/ 07 ноября 2019

Простой подход - ссылаться на абзац как на родительский элемент, а не беспокоиться о том, как ссылаться на него напрямую.

    function deleteElement2() {
        this.parentElement.remove();
    }

Однако добавление кнопки как

p.innerHTML += ' <button id="del'+ elementCounter2 +'" onclick="deleteElement2();">Delete this element.</button>';

не является хорошей практикой, так как вы добавляете элемент HTML в Javascript,когда вы можете делать это только в Javascript.

Чтобы узнать больше о вашем первоначальном вопросе или о том, как это сделать в JS, обратитесь к этому очень похожему примеру, приведенному в лекции CS50W на YouTube: https://youtu.be/ZRV7JCXAFTs?t=2486

1 голос
/ 07 ноября 2019

Вы можете настроить прослушиватель событий для каждого вновь созданного абзаца (исключая встроенный код) и забыть о счетчике (сохраненном здесь, чтобы показать работающий код)

var elementCounter2 = 0;

function addElement2() {
  elementCounter2++;
  var p = document.createElement("p");
  var node = document.createTextNode("This is element number " + elementCounter2);
  p.setAttribute("id", "p" + elementCounter2);
  p.appendChild(node);
  p.innerHTML += ' <button>Delete this element.</button>';
  document.getElementById("elements2").appendChild(p);
  var el = document.getElementById("p" + elementCounter2);
  el.addEventListener("click", deleteElement2, false);
}

function deleteElement2() {
  this.remove()
}
.borderful {
  border: solid 1px black;
  margin: 10px;
  padding: 10px;
}
<div class="borderful">
  <p>Here is the second part</p>
  <p>You can add elements here.</p>
  <p>You can delete these aswell but differntly.</p>
  <button onclick="addElement2();">Add an element.</button>
  <div id="elements2"></div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...