I has div block feedList which contains feedItems. Now to fill feedList with data (feedItems) i am using while loop. In future it will js which get data from backend dynamically.
I created 2 buttons, which is used to border num of feedItems in feedList. One is "5", another is "10". To border num of feedItems i use function which called on each event of adding feedItem div in feedList. You can see that this function check how much feedItems now in feedList: if it more than 5 - it remove old feedItem from feedList.
var removeIf5 = function (event) {
alert("last div removed if length more than 5");
};
var removeIf10 = function (event) {
alert("last div removed if length more than 10");
};
document.getElementById("list5Items")
.addEventListener("click" , function(e){
alert("1");
feedList.removeEventListener("DOMNodeInserted", removeIf5, false);
feedList.removeEventListener("DOMNodeInserted", removeIf10, false);
feedList.addEventListener("DOMNodeInserted", removeIf5, false);
});
document.getElementById("list10Items")
.addEventListener("click" , function(e){
alert("2");
feedList.removeEventListener("DOMNodeInserted", removeIf5, false);
feedList.removeEventListener("DOMNodeInserted", removeIf10, false);
feedList.addEventListener("DOMNodeInserted", removeIf10, false);
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="feedField">
<div class="feedNav">
<div class="button-group-2">
<input type="submit" id="list10Items" value="10"/>
<input type="submit" id="list5Items" value="5"/>
</div>
</div>
<div class="feedList">
<div class="feedItem">itemA</div>
<div class="feedItem">itemB</div>
<div class="feedItem">itemC</div>
</div>
</div>
</body>
</html>Problem in that i create 2 functions for same work: they used to remove elements, and different only in border number. One remove if feedList length is more than 5, another - more than 10.
How i can rewrite my code?
<div class="feedList"></div>? (which might work if theidattribute was set) \$\endgroup\$ – Sᴀᴍ Onᴇᴌᴀ Aug 21 '20 at 22:30