1
\$\begingroup\$

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?

\$\endgroup\$
3
  • \$\begingroup\$ When I click either button I see an error in the console: "Uncaught ReferenceError: feedList is not defined". Is the intention to reference the DOM element <div class="feedList"></div>? (which might work if the id attribute was set) \$\endgroup\$ – Sᴀᴍ Onᴇᴌᴀ Aug 21 '20 at 22:30
  • \$\begingroup\$ Honestly removing items from a list seems strange. Why not render a slice of the array? Also is the default behaviour to list all of the items? \$\endgroup\$ – Ted Brownlow Aug 21 '20 at 23:01
  • \$\begingroup\$ @TedBrownlow, thats why i am asking that question: i got some solution, but thing that it's ugly. What about array? You suggest save all items in array and regular render just some of them (slice of array)? Default behaviour is to list items in realtime: when you got new item you render that one in DOM and remove unneeded old. \$\endgroup\$ – Gudsaf Aug 22 '20 at 8:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.