How to remove multiple dynamically generated elements at the same time by their class name?

Question

I am doing an e commerce project, and for the shipping part, I let the user enter one area place asssociated with a price and then these two values are displayed with a remove button. The user can generate multiple times of these three elements.(and at each of these three generated elements, there are two input hidden to handle the values and then process that data with php) When clicked on the remove button, i would like to remove the entered area+the price+the remove button by their similar class name. But how to do that when it is dynamically generated ? This is the HTML part:

        <label for="places">Places/area : </label>
        <input type="text" name="ps_places" id="ps_places" value="" >
        <label for="ps_price" "> Price : </label><input type="text" name="ps_price" id="ps_price" value="" >
        <button type="button" onclick="ps_add()">OK</button>
        <div id="display1"></div>

And the javascript part:

function addElement(parentId, elementTag, elementId, html) {
var p = document.getElementById(parentId);
var newElement = document.createElement(elementTag);
newElement.setAttribute('class', elementId);
newElement.innerHTML = html;
p.appendChild(newElement);
}


function ps_add() 
{

var pv = document.getElementById('ps_places').value;
var prv = document.getElementById('ps_price').value;

if((pv != "") && (prv != ""))
{
ps_id++;

addElement("display1", "span", ps_id, "- ");
addElement("display1", "label", ps_id, pv);
addElement("display1", "span", ps_id, " :  ");
addElement("display1", "label", ps_id, prv);
addElement("display1", "span", ps_id, "    ");
addElement("display1", "button", ps_id, "Remove");
addElement("display1", "br", ps_id, "");

var input1 = document.createElement("input");
input1.setAttribute("type", "hidden");
input1.setAttribute("class", "ps_id");
input1.setAttribute("name", "ps_places[]");
input1.setAttribute("value", pv);
display1.appendChild(input1);

var input2 = document.createElement("input");
input2.setAttribute("type", "hidden");
input2.setAttribute("class", "ps_id");
input2.setAttribute("name", "ps_price[]");
input2.setAttribute("value", prv);
display1.appendChild(input2);
}
document.getElementById('ps_places').value= ""; 
document.getElementById('ps_price').value= "";  
}

What about the `jQuery` tag? was it added by mistake perhaps? — Artur Filipiak, Sep 13 '15 at 09:58
i also accept jquery response as sometimes it can be more concise — user2305415, Sep 13 '15 at 10:07

score 3 · Answer 1 · answered Sep 13 '15 at 10:02

3

As you have added jquery, I would assume you use jQuery. You can remove all the elements by their classname using this:

$(".classname").remove();

If it was by mistake, and if you need a pure JavaScript solution, you can use this:

elems = document.querySelectorAll(".classname");
for (var elem in elems)
  elems[elem].parentNode.removeChild(elems[elem]);

answered Sep 13 '15 at 10:02

Praveen Kumar Purushothaman

164,888
24
203
252

Thanks, but how to handle with a click on a button that is dynamically generated , because when i put this code : $("button").click(function() { alert('ok'); }); The button is not detected as it was generated – user2305415 Sep 13 '15 at 10:14
@user2305415 Did you put it inside `$(document).ready(function () {})`? – Praveen Kumar Purushothaman Sep 13 '15 at 10:40
$(document).ready(function(){ $('body').on('click', 'button.ps_id', function() { alert('ok'); $(".ps_id").remove(); }); }); – user2305415 Sep 13 '15 at 11:11
No that's not right. Can you [edit] your question and add the code @user2305415? – Praveen Kumar Purushothaman Sep 13 '15 at 11:13
@user2305415 Do this. Go to http://jsbin.com and create a model of what you have currently. – Praveen Kumar Purushothaman Sep 13 '15 at 11:14
@user2305415 Is it fine to use jQuery for you? – Praveen Kumar Purushothaman Sep 13 '15 at 11:26
Yes but if it is also possible in js it's ok because, i have searched previously similar questions and they often responded in jquery so i thought that maybe in js it's too tricky. I was also looking to this post : http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements – user2305415 Sep 13 '15 at 11:31
Very simple one. You need to delgate the events for this. I can help you with this. What exactly your script does and what you want the output to be? @user2305415 The JSBin is complicated. Give the me the final HTML inside the div id you wanna see? – Praveen Kumar Purushothaman Sep 13 '15 at 11:32
No it's practical with jsbin, for example you can enter whatever country and then for the price whatever number. – user2305415 Sep 13 '15 at 11:40

How to remove multiple dynamically generated elements at the same time by their class name?

1 Answers1