CODEWITHSUNDEEP
javascripthtml
lapingultah
lapingultah

Reputation: 316

JS: Selecting a DIV based on its onClick value

I have several different divs with same class, no id and only their onClick function separating them so they are uniquely identifiable, like this:

<div class="nest" onclick="nested.selection('VALUE1'); return false;">
  ... something inside the div ...
</div>
<div class="nest" onclick="nested.selection('VALUE2'); return false;">
  ... something inside the div ...
</div>

I would need to find and delete an entire div based on the specified onClick value, but since I cannot use getElementById, Class or Name, how is this lookup achievable with JS (not jQuery)?

Upvotes: 2

Views: 437

Answers (4)

R&#252;zgar
R&#252;zgar

Reputation: 997

You don't need to click anything here. Just pass the argument. Like so:

deleteWithArg('VALUE1');


function deleteWithArg(deleteElement) {
	var nst = document.getElementsByClassName("nest");
	for(var i = 0; i < nst.length; i++)
	{
	   let atr = nst.item(i).getAttribute('onclick').match(/'([^']+)'/)[1];
	   if (atr == deleteElement) {
			nst.item(i).parentNode.removeChild(nst.item(i));
	   }
	}	
}
deleteWithArg('VALUE1');
<div class="nest" onclick="nested.selection('VALUE1'); return false;">
  ... something inside the div with value VALUE1...
</div>
<div class="nest" onclick="nested.selection('VALUE2'); return false;">
  ... something inside the div with value VALUE2...
</div>

Upvotes: 0

Jovi
Jovi

Reputation: 36

try this

document.querySelector('[onclick="nested.selection(\'VALUE2\'); return false;"]').remove()

Upvotes: 2

Ufuk Aydın
Ufuk Aydın

Reputation: 158

try this;

   var nested = {
        selection: function (a, e) {
            var element = e.currentTarget;
           element.parentNode.removeChild(element);
        }

    }

html

<div class="nest" onclick="nested.selection('VALUE1',event); return false;">
    ... something inside the div ...VALUE1
</div>
<div class="nest" onclick="nested.selection('VALUE2',event); return false;">
    ... something inside the div ...VALUE2
</div>

Upvotes: 0

Łukasz Blaszyński
Łukasz Blaszyński

Reputation: 1565

elements = document.querySelectorAll('.nest');

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', (event) => {
        const item = event.target;
        item.parentNode.removeChild(item);
    });
}

This code will remove div after clicking on it. Im attaching event handler to all 'nest' elements and then after clicking on specific item removing it.

Upvotes: 0

Related Questions