adding text of a div to a list by clicking and removing it by click on same div












4















I'm trying to make some div's with jquery that by clicking on them I can add their text into a list and by clicking again on that div I can remove just that div's text from the list, not all of them.
but when I order to remove by clicking again on that div all text remove's from list






$(".first-div").on('click', function() {
$(this).toggleClass("div2 active");

let matn = $("<h3>" + $(this).html() + "</h3>");

if ($(this).hasClass("active")) {
$(".textbox").append(matn);
} else {
$(".textbox").children("h5").html($(this).html()).remove();
}

})

body {
padding: 3em;
}

.first-div {
padding: 0.5em 1.5em;
background-color: silver;
margin: 2em 0;
border: 2px solid silver;
}

.div2 {
border-color: red;
}

.text {
margin-top: 3em;
padding: 1em;
}

.textbox {
padding: 1.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<section>
<div class="first-div">
<h5>text1</h5>
</div>
<div class="first-div">
<h5>text2</h5>
</div>
<div class="first-div">
<h5>text3</h5>
</div>
</section>
<section class="text">
<div class="textbox"></div>
</section>
</body>












share|improve this question

























  • ok but have you tried anything? any code you can provide us with so we can help you?

    – Bargros
    Nov 14 '18 at 8:39






  • 1





    @Bargros there are code snippet though?

    – Mukyuu
    Nov 14 '18 at 8:40











  • Whoops I did not see it, sorry. Thank you @Mukyuu

    – Bargros
    Nov 14 '18 at 8:41













  • @Bargros I wrote them under description

    – Benjamin Karami
    Nov 14 '18 at 11:03
















4















I'm trying to make some div's with jquery that by clicking on them I can add their text into a list and by clicking again on that div I can remove just that div's text from the list, not all of them.
but when I order to remove by clicking again on that div all text remove's from list






$(".first-div").on('click', function() {
$(this).toggleClass("div2 active");

let matn = $("<h3>" + $(this).html() + "</h3>");

if ($(this).hasClass("active")) {
$(".textbox").append(matn);
} else {
$(".textbox").children("h5").html($(this).html()).remove();
}

})

body {
padding: 3em;
}

.first-div {
padding: 0.5em 1.5em;
background-color: silver;
margin: 2em 0;
border: 2px solid silver;
}

.div2 {
border-color: red;
}

.text {
margin-top: 3em;
padding: 1em;
}

.textbox {
padding: 1.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<section>
<div class="first-div">
<h5>text1</h5>
</div>
<div class="first-div">
<h5>text2</h5>
</div>
<div class="first-div">
<h5>text3</h5>
</div>
</section>
<section class="text">
<div class="textbox"></div>
</section>
</body>












share|improve this question

























  • ok but have you tried anything? any code you can provide us with so we can help you?

    – Bargros
    Nov 14 '18 at 8:39






  • 1





    @Bargros there are code snippet though?

    – Mukyuu
    Nov 14 '18 at 8:40











  • Whoops I did not see it, sorry. Thank you @Mukyuu

    – Bargros
    Nov 14 '18 at 8:41













  • @Bargros I wrote them under description

    – Benjamin Karami
    Nov 14 '18 at 11:03














4












4








4








I'm trying to make some div's with jquery that by clicking on them I can add their text into a list and by clicking again on that div I can remove just that div's text from the list, not all of them.
but when I order to remove by clicking again on that div all text remove's from list






$(".first-div").on('click', function() {
$(this).toggleClass("div2 active");

let matn = $("<h3>" + $(this).html() + "</h3>");

if ($(this).hasClass("active")) {
$(".textbox").append(matn);
} else {
$(".textbox").children("h5").html($(this).html()).remove();
}

})

body {
padding: 3em;
}

.first-div {
padding: 0.5em 1.5em;
background-color: silver;
margin: 2em 0;
border: 2px solid silver;
}

.div2 {
border-color: red;
}

.text {
margin-top: 3em;
padding: 1em;
}

.textbox {
padding: 1.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<section>
<div class="first-div">
<h5>text1</h5>
</div>
<div class="first-div">
<h5>text2</h5>
</div>
<div class="first-div">
<h5>text3</h5>
</div>
</section>
<section class="text">
<div class="textbox"></div>
</section>
</body>












share|improve this question
















I'm trying to make some div's with jquery that by clicking on them I can add their text into a list and by clicking again on that div I can remove just that div's text from the list, not all of them.
but when I order to remove by clicking again on that div all text remove's from list






$(".first-div").on('click', function() {
$(this).toggleClass("div2 active");

let matn = $("<h3>" + $(this).html() + "</h3>");

if ($(this).hasClass("active")) {
$(".textbox").append(matn);
} else {
$(".textbox").children("h5").html($(this).html()).remove();
}

})

body {
padding: 3em;
}

.first-div {
padding: 0.5em 1.5em;
background-color: silver;
margin: 2em 0;
border: 2px solid silver;
}

.div2 {
border-color: red;
}

.text {
margin-top: 3em;
padding: 1em;
}

.textbox {
padding: 1.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<section>
<div class="first-div">
<h5>text1</h5>
</div>
<div class="first-div">
<h5>text2</h5>
</div>
<div class="first-div">
<h5>text3</h5>
</div>
</section>
<section class="text">
<div class="textbox"></div>
</section>
</body>








$(".first-div").on('click', function() {
$(this).toggleClass("div2 active");

let matn = $("<h3>" + $(this).html() + "</h3>");

if ($(this).hasClass("active")) {
$(".textbox").append(matn);
} else {
$(".textbox").children("h5").html($(this).html()).remove();
}

})

body {
padding: 3em;
}

.first-div {
padding: 0.5em 1.5em;
background-color: silver;
margin: 2em 0;
border: 2px solid silver;
}

.div2 {
border-color: red;
}

.text {
margin-top: 3em;
padding: 1em;
}

.textbox {
padding: 1.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<section>
<div class="first-div">
<h5>text1</h5>
</div>
<div class="first-div">
<h5>text2</h5>
</div>
<div class="first-div">
<h5>text3</h5>
</div>
</section>
<section class="text">
<div class="textbox"></div>
</section>
</body>





$(".first-div").on('click', function() {
$(this).toggleClass("div2 active");

let matn = $("<h3>" + $(this).html() + "</h3>");

if ($(this).hasClass("active")) {
$(".textbox").append(matn);
} else {
$(".textbox").children("h5").html($(this).html()).remove();
}

})

body {
padding: 3em;
}

.first-div {
padding: 0.5em 1.5em;
background-color: silver;
margin: 2em 0;
border: 2px solid silver;
}

.div2 {
border-color: red;
}

.text {
margin-top: 3em;
padding: 1em;
}

.textbox {
padding: 1.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<section>
<div class="first-div">
<h5>text1</h5>
</div>
<div class="first-div">
<h5>text2</h5>
</div>
<div class="first-div">
<h5>text3</h5>
</div>
</section>
<section class="text">
<div class="textbox"></div>
</section>
</body>






javascript jquery html5 css3






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 14 '18 at 8:42









Rory McCrossan

242k29207245




242k29207245










asked Nov 14 '18 at 8:34









Benjamin KaramiBenjamin Karami

304




304













  • ok but have you tried anything? any code you can provide us with so we can help you?

    – Bargros
    Nov 14 '18 at 8:39






  • 1





    @Bargros there are code snippet though?

    – Mukyuu
    Nov 14 '18 at 8:40











  • Whoops I did not see it, sorry. Thank you @Mukyuu

    – Bargros
    Nov 14 '18 at 8:41













  • @Bargros I wrote them under description

    – Benjamin Karami
    Nov 14 '18 at 11:03



















  • ok but have you tried anything? any code you can provide us with so we can help you?

    – Bargros
    Nov 14 '18 at 8:39






  • 1





    @Bargros there are code snippet though?

    – Mukyuu
    Nov 14 '18 at 8:40











  • Whoops I did not see it, sorry. Thank you @Mukyuu

    – Bargros
    Nov 14 '18 at 8:41













  • @Bargros I wrote them under description

    – Benjamin Karami
    Nov 14 '18 at 11:03

















ok but have you tried anything? any code you can provide us with so we can help you?

– Bargros
Nov 14 '18 at 8:39





ok but have you tried anything? any code you can provide us with so we can help you?

– Bargros
Nov 14 '18 at 8:39




1




1





@Bargros there are code snippet though?

– Mukyuu
Nov 14 '18 at 8:40





@Bargros there are code snippet though?

– Mukyuu
Nov 14 '18 at 8:40













Whoops I did not see it, sorry. Thank you @Mukyuu

– Bargros
Nov 14 '18 at 8:41







Whoops I did not see it, sorry. Thank you @Mukyuu

– Bargros
Nov 14 '18 at 8:41















@Bargros I wrote them under description

– Benjamin Karami
Nov 14 '18 at 11:03





@Bargros I wrote them under description

– Benjamin Karami
Nov 14 '18 at 11:03












2 Answers
2






active

oldest

votes


















1














A simpler pattern to follow is to build the entire list everytime a change is made, instead of having to maintain the array when an item is selected/deselected.



Also note that your current example is nesting <h5> elements within <h3>, which is invalid.






$(".first-div").on('click', function() {
$(this).toggleClass("div2 active");
let matn = $('.first-div.active').map(function() {
return $(this).html();
}).get();
$(".textbox").html(matn);
})

body {
padding: 3em;
}

.first-div {
padding: 0.5em 1.5em;
background-color: silver;
margin: 2em 0;
border: 2px solid silver;
}

.div2 {
border-color: red;
}

.text {
margin-top: 3em;
padding: 1em;
}

.textbox {
padding: 1.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div class="first-div">
<h5>text1</h5>
</div>
<div class="first-div">
<h5>text2</h5>
</div>
<div class="first-div">
<h5>text3</h5>
</div>
</section>

<section class="text">
<div class="textbox"></div>
</section>








share|improve this answer
























  • thx a lot mate that's it

    – Benjamin Karami
    Nov 14 '18 at 11:06



















1














You can just find the element that contains the text and remove it from the list like this:



$(".first-div").on('click', function() {
$(this).toggleClass("div2 active");

let matn = $("<h3>" + $(this).html() + "</h3>");

if ($(this).hasClass("active")) {
$(".textbox").append(matn);
} else {
$(".textbox").find("h5:contains(" + $(this).text().trim() + ")").remove();
}

})


In your code just change this:



$(".textbox").children("h5").html($(this).html()).remove();


to this:



$(".textbox").find("h5:contains(" + $(this).text().trim() + ")").remove();


Here is the JSFiddle demo






share|improve this answer























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53295941%2fadding-text-of-a-div-to-a-list-by-clicking-and-removing-it-by-click-on-same-div%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    2 Answers
    2






    active

    oldest

    votes








    2 Answers
    2






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    1














    A simpler pattern to follow is to build the entire list everytime a change is made, instead of having to maintain the array when an item is selected/deselected.



    Also note that your current example is nesting <h5> elements within <h3>, which is invalid.






    $(".first-div").on('click', function() {
    $(this).toggleClass("div2 active");
    let matn = $('.first-div.active').map(function() {
    return $(this).html();
    }).get();
    $(".textbox").html(matn);
    })

    body {
    padding: 3em;
    }

    .first-div {
    padding: 0.5em 1.5em;
    background-color: silver;
    margin: 2em 0;
    border: 2px solid silver;
    }

    .div2 {
    border-color: red;
    }

    .text {
    margin-top: 3em;
    padding: 1em;
    }

    .textbox {
    padding: 1.5em;
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <section>
    <div class="first-div">
    <h5>text1</h5>
    </div>
    <div class="first-div">
    <h5>text2</h5>
    </div>
    <div class="first-div">
    <h5>text3</h5>
    </div>
    </section>

    <section class="text">
    <div class="textbox"></div>
    </section>








    share|improve this answer
























    • thx a lot mate that's it

      – Benjamin Karami
      Nov 14 '18 at 11:06
















    1














    A simpler pattern to follow is to build the entire list everytime a change is made, instead of having to maintain the array when an item is selected/deselected.



    Also note that your current example is nesting <h5> elements within <h3>, which is invalid.






    $(".first-div").on('click', function() {
    $(this).toggleClass("div2 active");
    let matn = $('.first-div.active').map(function() {
    return $(this).html();
    }).get();
    $(".textbox").html(matn);
    })

    body {
    padding: 3em;
    }

    .first-div {
    padding: 0.5em 1.5em;
    background-color: silver;
    margin: 2em 0;
    border: 2px solid silver;
    }

    .div2 {
    border-color: red;
    }

    .text {
    margin-top: 3em;
    padding: 1em;
    }

    .textbox {
    padding: 1.5em;
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <section>
    <div class="first-div">
    <h5>text1</h5>
    </div>
    <div class="first-div">
    <h5>text2</h5>
    </div>
    <div class="first-div">
    <h5>text3</h5>
    </div>
    </section>

    <section class="text">
    <div class="textbox"></div>
    </section>








    share|improve this answer
























    • thx a lot mate that's it

      – Benjamin Karami
      Nov 14 '18 at 11:06














    1












    1








    1







    A simpler pattern to follow is to build the entire list everytime a change is made, instead of having to maintain the array when an item is selected/deselected.



    Also note that your current example is nesting <h5> elements within <h3>, which is invalid.






    $(".first-div").on('click', function() {
    $(this).toggleClass("div2 active");
    let matn = $('.first-div.active').map(function() {
    return $(this).html();
    }).get();
    $(".textbox").html(matn);
    })

    body {
    padding: 3em;
    }

    .first-div {
    padding: 0.5em 1.5em;
    background-color: silver;
    margin: 2em 0;
    border: 2px solid silver;
    }

    .div2 {
    border-color: red;
    }

    .text {
    margin-top: 3em;
    padding: 1em;
    }

    .textbox {
    padding: 1.5em;
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <section>
    <div class="first-div">
    <h5>text1</h5>
    </div>
    <div class="first-div">
    <h5>text2</h5>
    </div>
    <div class="first-div">
    <h5>text3</h5>
    </div>
    </section>

    <section class="text">
    <div class="textbox"></div>
    </section>








    share|improve this answer













    A simpler pattern to follow is to build the entire list everytime a change is made, instead of having to maintain the array when an item is selected/deselected.



    Also note that your current example is nesting <h5> elements within <h3>, which is invalid.






    $(".first-div").on('click', function() {
    $(this).toggleClass("div2 active");
    let matn = $('.first-div.active').map(function() {
    return $(this).html();
    }).get();
    $(".textbox").html(matn);
    })

    body {
    padding: 3em;
    }

    .first-div {
    padding: 0.5em 1.5em;
    background-color: silver;
    margin: 2em 0;
    border: 2px solid silver;
    }

    .div2 {
    border-color: red;
    }

    .text {
    margin-top: 3em;
    padding: 1em;
    }

    .textbox {
    padding: 1.5em;
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <section>
    <div class="first-div">
    <h5>text1</h5>
    </div>
    <div class="first-div">
    <h5>text2</h5>
    </div>
    <div class="first-div">
    <h5>text3</h5>
    </div>
    </section>

    <section class="text">
    <div class="textbox"></div>
    </section>








    $(".first-div").on('click', function() {
    $(this).toggleClass("div2 active");
    let matn = $('.first-div.active').map(function() {
    return $(this).html();
    }).get();
    $(".textbox").html(matn);
    })

    body {
    padding: 3em;
    }

    .first-div {
    padding: 0.5em 1.5em;
    background-color: silver;
    margin: 2em 0;
    border: 2px solid silver;
    }

    .div2 {
    border-color: red;
    }

    .text {
    margin-top: 3em;
    padding: 1em;
    }

    .textbox {
    padding: 1.5em;
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <section>
    <div class="first-div">
    <h5>text1</h5>
    </div>
    <div class="first-div">
    <h5>text2</h5>
    </div>
    <div class="first-div">
    <h5>text3</h5>
    </div>
    </section>

    <section class="text">
    <div class="textbox"></div>
    </section>





    $(".first-div").on('click', function() {
    $(this).toggleClass("div2 active");
    let matn = $('.first-div.active').map(function() {
    return $(this).html();
    }).get();
    $(".textbox").html(matn);
    })

    body {
    padding: 3em;
    }

    .first-div {
    padding: 0.5em 1.5em;
    background-color: silver;
    margin: 2em 0;
    border: 2px solid silver;
    }

    .div2 {
    border-color: red;
    }

    .text {
    margin-top: 3em;
    padding: 1em;
    }

    .textbox {
    padding: 1.5em;
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <section>
    <div class="first-div">
    <h5>text1</h5>
    </div>
    <div class="first-div">
    <h5>text2</h5>
    </div>
    <div class="first-div">
    <h5>text3</h5>
    </div>
    </section>

    <section class="text">
    <div class="textbox"></div>
    </section>






    share|improve this answer












    share|improve this answer



    share|improve this answer










    answered Nov 14 '18 at 8:42









    Rory McCrossanRory McCrossan

    242k29207245




    242k29207245













    • thx a lot mate that's it

      – Benjamin Karami
      Nov 14 '18 at 11:06



















    • thx a lot mate that's it

      – Benjamin Karami
      Nov 14 '18 at 11:06

















    thx a lot mate that's it

    – Benjamin Karami
    Nov 14 '18 at 11:06





    thx a lot mate that's it

    – Benjamin Karami
    Nov 14 '18 at 11:06













    1














    You can just find the element that contains the text and remove it from the list like this:



    $(".first-div").on('click', function() {
    $(this).toggleClass("div2 active");

    let matn = $("<h3>" + $(this).html() + "</h3>");

    if ($(this).hasClass("active")) {
    $(".textbox").append(matn);
    } else {
    $(".textbox").find("h5:contains(" + $(this).text().trim() + ")").remove();
    }

    })


    In your code just change this:



    $(".textbox").children("h5").html($(this).html()).remove();


    to this:



    $(".textbox").find("h5:contains(" + $(this).text().trim() + ")").remove();


    Here is the JSFiddle demo






    share|improve this answer




























      1














      You can just find the element that contains the text and remove it from the list like this:



      $(".first-div").on('click', function() {
      $(this).toggleClass("div2 active");

      let matn = $("<h3>" + $(this).html() + "</h3>");

      if ($(this).hasClass("active")) {
      $(".textbox").append(matn);
      } else {
      $(".textbox").find("h5:contains(" + $(this).text().trim() + ")").remove();
      }

      })


      In your code just change this:



      $(".textbox").children("h5").html($(this).html()).remove();


      to this:



      $(".textbox").find("h5:contains(" + $(this).text().trim() + ")").remove();


      Here is the JSFiddle demo






      share|improve this answer


























        1












        1








        1







        You can just find the element that contains the text and remove it from the list like this:



        $(".first-div").on('click', function() {
        $(this).toggleClass("div2 active");

        let matn = $("<h3>" + $(this).html() + "</h3>");

        if ($(this).hasClass("active")) {
        $(".textbox").append(matn);
        } else {
        $(".textbox").find("h5:contains(" + $(this).text().trim() + ")").remove();
        }

        })


        In your code just change this:



        $(".textbox").children("h5").html($(this).html()).remove();


        to this:



        $(".textbox").find("h5:contains(" + $(this).text().trim() + ")").remove();


        Here is the JSFiddle demo






        share|improve this answer













        You can just find the element that contains the text and remove it from the list like this:



        $(".first-div").on('click', function() {
        $(this).toggleClass("div2 active");

        let matn = $("<h3>" + $(this).html() + "</h3>");

        if ($(this).hasClass("active")) {
        $(".textbox").append(matn);
        } else {
        $(".textbox").find("h5:contains(" + $(this).text().trim() + ")").remove();
        }

        })


        In your code just change this:



        $(".textbox").children("h5").html($(this).html()).remove();


        to this:



        $(".textbox").find("h5:contains(" + $(this).text().trim() + ")").remove();


        Here is the JSFiddle demo







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 14 '18 at 8:49









        Ahs NAhs N

        7,05711528




        7,05711528






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53295941%2fadding-text-of-a-div-to-a-list-by-clicking-and-removing-it-by-click-on-same-div%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            這個網誌中的熱門文章

            Hercules Kyvelos

            Tangent Lines Diagram Along Smooth Curve

            Yusuf al-Mu'taman ibn Hud