How could I delete a specific element that I have created in javascript?

Question

I'm making something for my own use that will allow me to quickly and easily stack commands (for Minecraft command block creations).

I have already created a button to create new textareas and a button to delete them. Presuming that there will be several textareas created, how could I delete a specific textbox in the middle of all of them (with the button to delete them)?

I have a div element to act as the parent, and actually was able to successfully delete the textareas AND buttons. My problem is after deleting even just one, I wasn't able to create more. And I noticed the text in the boxes would shift to the left.

The function :

function removeBox() {
            var div = document.getElementById("newText");
            var cats = document.getElementsByClassName("tAC");
            var catss = document.getElementsByClassName("tACB");
            div.removeChild(cats[0]);
            div.removeChild(catss[0]);
        }

Don't judge me because I named the variables cats! The div :

<div id="newText">
    <textarea class="tAC" id="firstText"></textarea>
    <p></p>
</div>

Any ideas?

Answer 1

With what you have posted, I am suggesting this.

Whenever a new textarea is created, create a new button within the div that holds the textarea . This way when the remove button is clicked, you can use event.target to get the button element which dispatched the event and from there you can use event.target.previousSibling to find the textarea and remove it from the DOM by calling removeChild on event.target.parentNode . I am not sure if this is what you expect, so I didn't share code.

Answer 2

This is an example:

HTML:

<div id="container"></div>

JS:

var cont = document.getElementById("container");
cont.innerHTML += "<button id='b12' onclick='deleteMe("+'"b12"'+")'>b1b</button>"+
    "<button id='b22' onclick='deleteMe("+'"b22"'+")'>b2b</button>"+
    "<button id='b32' onclick='deleteMe("+'"b32"'+")'>b3b</button>";

window.deleteMe = function (elementId){
console.log("Borrando:", elementId );
document.getElementById(elementId).remove();
};

this is how it looks: fiddle

The idea is to be able to identify the element, that is why setting an id for the elements you need to manipulate is very helpful. Hope it inspire you.

Answer 3

I just tried your setup and it seems to be working fine:

  function removeBox() { var div = document.getElementById('new-text'); var cats = document.getElementsByClassName("tAC"); var catss = document.getElementsByClassName("tACB"); var cats0 = cats[0]; var catss0 = catss[0]; div.removeChild(cats0); div.removeChild(catss0); } var button = document.getElementsByTagName('button')[0] button.addEventListener('click',removeBox,false); 

 #new-text { width: 200px; } #new-text p { display: inline-block; width: 100px; } #new-text .tAC { float: left; } #new-text .tACB { float: right; } button { clear: both; } 

 <div id="new-text"> <p class="tAC">cats0</p> <p class="tACB">catss0</p> <p class="tAC">cats1</p> <p class="tACB">catss1</p> <p class="tAC">cats2</p> <p class="tACB">catss2</p> </div> <button type="button" />Click Me</button>