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?

By the way, the javascript isn't the code that worked, I changed it. Before it worked with arrays. — Ashton Compton, Aug 04 '16 at 21:10
where is used removeBox(), and what is this in this function? — Maciej Sikora, Aug 04 '16 at 21:11
What is `this` in your code? You're going to need to show us some code that actually does something. There's far too little context here. — JLRishe, Aug 04 '16 at 21:11
Ok, that was the code I began to write when I was trying illogical things. — Ashton Compton, Aug 04 '16 at 21:14
I changed the element that the textareas and buttons used as a reference node, but the problem with the text shifting(and this is now what I need help with). I'm pretty sure that the first textarea is getting deleted. — Ashton Compton, Aug 04 '16 at 21:17
This is the current code : 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]); } — Ashton Compton, Aug 04 '16 at 21:18
Right now, I just need to know how I can select the button being pressed and its partner textarea as the nodes in parentNode.removeChild(child); — Ashton Compton, Aug 04 '16 at 21:20
The code you have provided does nothing. There is not button, no click event hanlder, no script that creates the elements... Please provide that information. — trincot, Aug 04 '16 at 22:15
When the buttons are created, I set their onclick attribute to that function. The code I have shown is only a fraction of the entire code. — Ashton Compton, Aug 04 '16 at 22:22
Can you share more code so that we can see what you have actually tried? — Arun Kumar Mohan, Aug 04 '16 at 22:32
The button is created in the div statement (sorry I didn't make that clear) — Ashton Compton, Aug 04 '16 at 22:36
Ok, I used event.target as the child node and it worked fine! Thanks everyone! — Ashton Compton, Aug 04 '16 at 23:05

score 0 · Accepted Answer · answered Aug 04 '16 at 22:37

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.

score 0 · Answer 2 · answered Aug 04 '16 at 22:43

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.

score 0 · Answer 3 · answered Aug 04 '16 at 22:55

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>

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

3 Answers3