adding text of a div to a list by clicking and removing it by click on same div
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>
javascript jquery html5 css3
add a comment |
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>
javascript jquery html5 css3
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
add a comment |
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>
javascript jquery html5 css3
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
javascript jquery html5 css3
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
add a comment |
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
add a comment |
2 Answers
2
active
oldest
votes
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>
thx a lot mate that's it
– Benjamin Karami
Nov 14 '18 at 11:06
add a comment |
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
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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>
thx a lot mate that's it
– Benjamin Karami
Nov 14 '18 at 11:06
add a comment |
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>
thx a lot mate that's it
– Benjamin Karami
Nov 14 '18 at 11:06
add a comment |
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>
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>
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
add a comment |
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
add a comment |
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
add a comment |
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
add a comment |
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
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
answered Nov 14 '18 at 8:49
Ahs NAhs N
7,05711528
7,05711528
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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