如何识别单击了具有相同类的序列中的哪个 div

Question

I have two arrays:

codes=[code1, code2, code3];
quantities=[23, 67, 87];

and this HTML

<div id='cart_body'></div>

and this script

Delete=function(){

}

document.getElementById('cart_body').innerHTML='';
    cart_text='';
    emp='<div class="close_button" onClick='Delete()'>x</div>';
    open_span='<span class="close_span ">';
    close_span='</span>';
    elf='<br class="none"/>';
    for(i=0; i<product_codes.length; i++){
//the two lines directly below this line are actually one continuous line
        cart_text+=(open_span+codes[i]+"  
        (x"+quantities[i]+")"+close_span+emp+elf);
    }


    document.getElementById('cart_body').innerHTML=cart_text;

and this css:

.close_button{
display: inline-block;
background-color: grey;
height: 12px;
width: 12px;
border-radius: 6px;
}
span{

display: inline-block;
}

The purpose of this script is to write lines of text. Each line has one code, and one quantity, as well as a div. The div also has some styling that makes in into a circular button, but that bit is irrelevant.

My questions are these: What can I write so that the delete function can detect which div in the class "close_button" triggered the function?

BASED ON THAT, the function needs to delete that line of text (the line that contains the div that was clicked, the code, and the quantity), as well as delete those two items (the code and quantity) from their respective arrays.

How can I do this?

If I'm not being clear enough feel free to ask :)

PS (answers with a working fiddle would be especially appreciated) ;-)

PPS please regular JavaScript only. No libraries or frameworks, please.

Fiddle Here

Click the button that says click me. In the actual code, I do not know how many items there will be in the arrays, but there will be an identical amount in each. Like I said, I need any of the small circular buttons, when clicked, to delete itself and all text on the same line, as well as the items in the arrays that the text on that line represents.

Answer 1

The function would be better named as deleteDiv or more generically as deleteElement and can be use to delete any element.

You can pass a reference to the element that called the listener using this :

emp = '<div class="close_button" onClick="deleteElement(this)">x</div>';

then the function can be:

function deleteElement(el) {
  el.parentNode.removeChild(el);
} 

Answer 2

What can I write so that the delete function can detect which div in the class "close_button" triggered the function?

To do this I would first recommend having each element in a <div> rather than a <span> and a separate <div> . Then we could just remove the parent:

cart_text+= "<div>"+(open_span+codes[i]+"   (x"+quantities[i]+")"+close_span+emp+elf)+"</div>";

To remove the parent you can do item.parentNode.remove(); , where you can pass the element as this in the onclick event:

<div class="close_button" onclick="deleteItem(this)">x</div>

And the function to remove the element:

deleteItem = function(item) {
    item.parentNode.remove();
}

Here is a fiddle example.

What about the item in the array?

To do this we need to get the text from our element, remove the text that has (x[Number]) , then trim that. From there we need to go through the array and find the element with the matching text and remove that element from our array. To do that I made a separate function for removing an element from an array:

function removeTextFromArray(array, text){
    for (var i=array.length-1; i>=0; i--) {
        if (array[i] === text) {
            array.splice(i, 1);
            quantities.splice(i, 1); // Removes from quantities at same position
            return array;
        }
    }
}

And to get the text, and remove the stuff we don't want in that text:

deleteItem = function(item) {
    item.parentElement.remove();
    // Gets the text in the close_span class of the parent div  
    var textInNode = item.parentNode.getElementsByClassName("close_span")[0].innerHTML;
    // Removes the items in (...) and trims the string.
    textInNode = textInNode.replace(/ *\([^)]*\) */g, "").trim();
    // Takes the string and removes it from the codes array
    codes = removeTextFromArray(codes, textInNode);  
}

Here is a Fiddle Example of that.

Answer 3

Here it is all working. Just click Run

 product_codes=['code1', 'code2', 'code3']; quantities=[23, 67, 87]; function deleteIt(e){ e.parentNode.remove(); } document.getElementById('cart_body').innerHTML=''; cart_text=''; emp='<div class="close_button" onclick="deleteIt(this)">x</div>'; open_span='<span class="close_span ">'; close_span='</span>'; elf='<br class="none"/>'; for(i=0; i<product_codes.length; i++){ cart_text+='<div>'+(open_span+product_codes[i]+"(x"+quantities[i]+")"+close_span+emp+elf)+'</div>'; } document.getElementById('cart_body').innerHTML=cart_text;

 .close_button{ display: inline-block; margin:4px; position:relative; background-color: red; color:blue; border:1px solid transparent; border-radius: 50%; padding:2px 7px; cursor:default; } .close_button:hover{ border: 1px solid blue; } span{ display: inline-block; }

 <div id='cart_body'></div>

Answer 4

 x = document.getElementsByClassName("e"); for (var i=0; i < x.length; i++) { x[i].onclick = function() {deleteIt(this)} } function deleteIt(x) { x.style.display = "none" }

 <div class=e>Some text 0</div> <div class=e>Some text 1</div> <div class=e>Some text 2</div> <div class=e>Some text 3</div> <div class=e>Some text 4</div> <div class=e>Some text 5</div>

Edited for pure JS, thanks to this post Applying onClick to Element Array in a For Loop

Answer 5

As you want here is the following solution without using any frameowrk or library.

HTML:

<div id='cart_body'></div>
<button OnClick='myfunction()'>Click me</button>

JS:

    codes=['hi', 'random text', 'lorem ipsum'];
quantities=[1, 45, 32];
 deleteDiv = function(e) {
    console.log(e);

     var code_name_str = e.currentTarget.parentNode.getElementsByTagName('span')[0].innerText.split('(')[0];

     var code_name = code_name_str.substring(0, code_name_str.length - 1);
     var code_index = codes.indexOf(code_name);
     if (code_index > -1) {
        codes.splice(code_index, 1);
     }
         console.log(codes);
         var code_quantity_str = e.currentTarget.parentNode.getElementsByTagName('span')[0].innerText.split('(')[1];

     var code_quantity = code_quantity_str.substring(0, code_quantity_str.length - 1);
     var quantity_index = quantities.indexOf(parseInt(code_quantity));
     if (quantity_index > -1) {
        quantities.splice(quantity_index, 1);
     }
      console.log(quantities);
    e.currentTarget.parentNode.parentElement.removeChild(e.currentTarget.parentNode);
}
myfunction = function(){
document.getElementById('cart_body').innerHTML='';
    open_div = '<div>'
        cart_text='';
        emp='<div id="sam" class="close_button"  onclick="deleteDiv(event)">x</div>';
        open_span='<span class="close_span">';
        close_span='</span>';
        elf='<br class="none"/>';
    close_div = '</div>'
        for(i=0; i<codes.length; i++){
            cart_text+=(open_div+open_span+codes[i]+"   ("+quantities[i]+")"+close_span+emp+elf+close_div);
        }
        document.getElementById('cart_body').innerHTML=cart_text;
}

CSS:

#cart_body{
    height: 300px;
    width: 300px;
    text-align: center;
    border: 1px solid black;
}
span{
    text-align: center;
    display: inline-block;
}
    .close_button{
    border:  1px solid black;
    width: 12px;
    height:  12px;
    border-radius: 90px;
    font-size: 12px;
    text-align:  center;
    line-height: 11px;
    background-color: lightGrey;
    display:  inline-block;
    margin-left:  20px;
    }
body{
    font-size: 12px;

}
.close_button:hover{
    color: red;
    border: 2px solid red;
    font-weight: bold;
    }

Fiddle Link:

https://jsfiddle.net/uhwLg8ss/4/