CODEWITHSUNDEEP
javascriptjquery
Andrew Lee
Andrew Lee

Reputation: 304

How to filter out results based off of an Array with jQuery

My program currently has a contenteditable area where users can input text and when they press the button it shoots out the text inputted to another div below it. I am trying to make it so when the user presses the button it shoots out the text inputted but also filters out each div line produced if it contains any of the following words within a specified array.

Any help is appreciated. Thank you.

Here is my code

<body>
    <div id="pbf-container">
        <div class="pbf-header">
            <h1> VERO Filter Program </h1>
            <h3> Input Links Here </h3>
        </div>
            <div class="pbf-link-container" contenteditable="true">
            </div>
                <div class="pbf-button-control">
                    <button id="pbf-filter"> Filter </button>
                </div>
                    <div class="pbf-link-output">
                    </div>
    </div>
    <!-- uncomment when finished <script src="C:\Users\andrew.lee\Desktop\VERO Filter\pbf.js"></script> -->
    <script>

        $('#pbf-filter').click(function(){
            var $pbfOutput = $('.pbf-link-container[contenteditable]').html();
            var pbfFilterWords = ['red', 'blue', 'purple', 'green', 'orange'];
            $('.pbf-link-output').html($pbfOutput)
            .filter(pbfFilterWords).remove('div');
            });


    </script>
</body>

Here is the CSS:

#pbf-container {
    display: block;
    width: 1080px;
    margin: 0 auto;
    background-color: #333;
    padding: 3%;
}

.pbf-header {
    text-align: center;
}

.pbf-link-container {
    width: 1080px;
    min-height: 300px;
    background-color: #f8f8f8;
    font-size: 20px;
    font-family: 'Lato', sans-serif;
}

.pbf-button-control {
    text-align: center;
    padding: 2%;
}

.pbf-link-output {
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    color: #fff;
}

example picture

Upvotes: 1

Views: 128

Answers (1)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

You need to use .each() to loop through the array and check if div:contains any of this .. if yes .remove() it .. Actually the bad thing that contenteditable div doesn't make the div for the first line .. BUT I think I found a solution for this by append an empty <div> to the contenteditable div 

$('.pbf-link-container[contenteditable]').html('<div><br/></div>');
$('#pbf-filter').click(function(){
    var $pbfOutput = $('.pbf-link-container[contenteditable]').html();
    var pbfFilterWords = ['red', 'blue', 'purple', 'green', 'orange'];
    $('.pbf-link-output').html($pbfOutput);
    $.each(pbfFilterWords , function(i , val){
        $('.pbf-link-output > div:contains("'+val+'")').remove();
    });

});
#pbf-container {
    display: block;
    width: 1080px;
    margin: 0 auto;
    background-color: #333;
    padding: 3%;
}

.pbf-header {
    text-align: center;
}

.pbf-link-container {
    width: 1080px;
    min-height: 300px;
    background-color: #f8f8f8;
    font-size: 20px;
    font-family: 'Lato', sans-serif;
}

.pbf-button-control {
    text-align: center;
    padding: 2%;
}

.pbf-link-output {
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pbf-container">
<div class="pbf-header">
    <h1> VERO Filter Program </h1>
    <h3> Input Links Here </h3>
</div>
    <div class="pbf-link-container" contenteditable="true">
    </div>
        <div class="pbf-button-control">
            <button id="pbf-filter"> Filter </button>
        </div>
            <div class="pbf-link-output">
            </div>
</div>

Upvotes: 1

Related Questions