teratail
回答率
85.47%
質問するログイン新規登録
トップJavaScriptに関する質問重複するHTML要素をjQueryで削除するには

編集履歴

回答編集履歴

15

テキスト修正

2019/09/24 13:31

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -1,4 +1,10 @@
1
1
  こんにちは
2
+
3
+ 以下、追記も含め、３つの回答コードを挙げます。
4
+
5
+
6
+
7
+ ### 回答コード その1
2
8
 
3
9
 
4
10
 
@@ -32,11 +38,7 @@
32
38
 
33
39
 
34
40
 
35
- ### 追記
36
-
37
-
38
-
39
- 上記のコードでは、 `filter` に与える関数の中で、
41
+ ただし、上記のコードでは、 `filter` に与える関数の中で、
40
42
 
41
43
  ```
42
44
 
@@ -44,9 +46,11 @@
44
46
 
45
47
  ```
46
48
 
47
- を、**毎回**実行して、あるテキストを含む 最初の `<div class="post">` を取ってきているので、やや無駄なことをやっています。この無駄を省くとすれば、filter によるループにおいて出現するテキストをどこかに保存していき、そこに既に入っているテキストを持つ `<div>` が見つかったら、それを削除対象としてfilterで残るようにします。以下は、保存場所として [Set](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set) を使う例です。
49
+ を実行して、あるテキストを含む１個以上の`<div class="post">` の中で、最初の要素を filterによるループの**毎回**、取ってきており、その点では無駄なことをやっています。この無駄を省くとすれば、filter によるループにおいて出現するテキストを順次どこかに保存していき、そこに既に入っているテキストを持つ `<div>` が見つかったら、それを削除対象としてfilterで残るようにします。以下は、この考えをもとに、保存場所として [Set](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set) を使う例です。
48
50
 
49
51
 
52
+
53
+ ### 回答コード その2
50
54
 
51
55
  ```javascript
52
56
 
@@ -82,13 +86,13 @@
82
86
 
83
87
 
84
88
 
85
- とはいえ、よほどたくさんの `<div class="post">` があるのでもない限りは、パフォーマンスに顕著な差が出るとは思えませんので、コード行数の少ない冒頭に書いたほうのコードでもよいかと思います。
89
+ とはいえ、よほどたくさんの `<div class="post">` があるのでもない限りは、パフォーマンスに（ユーザーが体感し得るほどの）顕著な差が出るとは思えませんので、コード行数の少ない冒頭に書いたほうのコードでもよいかと思います。
86
90
 
87
91
 
88
92
 
89
93
 
90
94
 
91
- ### 追記2
95
+ ### 追記
92
96
 
93
97
 
94
98
 
@@ -98,9 +102,11 @@
98
102
 
99
103
 
100
104
 
101
- これを使うと、以下のようになります。
105
+ これを使うと、以下のような短いコードで、テキストが重複する `<div class="post">` の除去を書くことができます。
102
106
 
103
107
 
108
+
109
+ ### 回答コード その3
104
110
 
105
111
  ```javascript
106
112
 

14

テキスト修正

2019/09/24 13:31

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -94,7 +94,7 @@
94
94
 
95
95
  もうひとつ、解法となるコードを示します。
96
96
 
97
- 配列やオブジェクトの操作で便利なライブラリ lodash の[_.uniqBy](https://lodash.com/docs/#uniqBy) を使うと、配列から重複する要素を抜き、残った要素の順序は変わらない配列を得ることができます。何をもって重複とするのかも、第２引数の関数で与えることができます。
97
+ 配列やオブジェクトの操作で便利なライブラリ lodash の[_.uniqBy](https://lodash.com/docs/#uniqBy) を使うと、配列から重複する要素を抜き、残った要素の順序は変わらない配列を得ることができます。何が同じであることをもって重複とするのかも、第２引数の関数で与えることができます。
98
98
 
99
99
 
100
100
 

13

テキスト修正

2019/09/24 08:20

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -86,4 +86,38 @@
86
86
 
87
87
 
88
88
 
89
+
90
+
91
+ ### 追記2
92
+
93
+
94
+
95
+ もうひとつ、解法となるコードを示します。
96
+
97
+ 配列やオブジェクトの操作で便利なライブラリ lodash の[_.uniqBy](https://lodash.com/docs/#uniqBy) を使うと、配列から重複する要素を抜き、残った要素の順序は変わらない配列を得ることができます。何をもって重複とするのかも、第２引数の関数で与えることができます。
98
+
99
+
100
+
101
+ これを使うと、以下のようになります。
102
+
103
+
104
+
105
+ ```javascript
106
+
107
+ $('.posts').html(
108
+
109
+ _.uniqBy($('.post').toArray(), e => e.innerText )
110
+
111
+ );
112
+
113
+ ```
114
+
115
+ 上記のコードでは、`$('.post')` の配列から重複する（＝テキストが同じ）要素を抜いた配列を作り、 その配列で`$('.posts')` の内容を上書きしています。
116
+
117
+
118
+
119
+ - **動作確認用 CodePen: ** [https://codepen.io/jun68ykt/pen/RwbvQwY?editors=1011](https://codepen.io/jun68ykt/pen/RwbvQwY?editors=1011)
120
+
121
+
122
+
89
123
  以上、参考になれば幸いです。

12

テキスト修正

2019/09/24 08:19

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -36,7 +36,7 @@
36
36
 
37
37
 
38
38
 
39
- 上記のコードでは、 `filter` に与える関数の中で、毎回
39
+ 上記のコードでは、 `filter` に与える関数の中で、
40
40
 
41
41
  ```
42
42
 
@@ -44,7 +44,7 @@
44
44
 
45
45
  ```
46
46
 
47
- を実行して、あるテキストを含む 最初の `<div class="post">` を取ってきているので、やや無駄なことをやっています。この無駄を省くとすれば、filter によるループにおいて出現するテキストをどこかに保存していき、そこに既に入っているテキストを持つ `<div>` が見つかったら、それを削除対象としてfilterで残るようにします。以下は、保存場所として [Set](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set) を使う例です。
47
+ を、**毎回**実行して、あるテキストを含む 最初の `<div class="post">` を取ってきているので、やや無駄なことをやっています。この無駄を省くとすれば、filter によるループにおいて出現するテキストをどこかに保存していき、そこに既に入っているテキストを持つ `<div>` が見つかったら、それを削除対象としてfilterで残るようにします。以下は、保存場所として [Set](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set) を使う例です。
48
48
 
49
49
 
50
50
 

11

テキスト修正

2019/09/24 02:22

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -44,7 +44,7 @@
44
44
 
45
45
  ```
46
46
 
47
- を実行して、あるテキストを含む 最初の `<div class="post">` を取ってきているので、やや無駄なことをやっています。ここをもう少し賢くやるとすれば、filter によるループにおいて出現するテキストをどこかに保存していき、そこに既に入っているテキストを持つ `<div>` が見つかったら、それを削除対象としてfilterで残るようにします。以下は、保存場所として [Set](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set) を使う例です。
47
+ を実行して、あるテキストを含む 最初の `<div class="post">` を取ってきているので、やや無駄なことをやっています。この無駄を省くとすれば、filter によるループにおいて出現するテキストをどこかに保存していき、そこに既に入っているテキストを持つ `<div>` が見つかったら、それを削除対象としてfilterで残るようにします。以下は、保存場所として [Set](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set) を使う例です。
48
48
 
49
49
 
50
50
 

10

テキスト修正

2019/09/24 02:17

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -82,7 +82,7 @@
82
82
 
83
83
 
84
84
 
85
- とはいえ、よほどたくさんの `<div class="post">` があるのでもない限りは、パフォーマンスに差が出るとは思えませんので、コード行数の少ない冒頭に書いたほうのコードでもよいかと思います。
85
+ とはいえ、よほどたくさんの `<div class="post">` があるのでもない限りは、パフォーマンスに顕著な差が出るとは思えませんので、コード行数の少ない冒頭に書いたほうのコードでもよいかと思います。
86
86
 
87
87
 
88
88
 

9

テキスト修正

2019/09/24 01:58

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -82,6 +82,8 @@
82
82
 
83
83
 
84
84
 
85
+ とはいえ、よほどたくさんの `<div class="post">` があるのでもない限りは、パフォーマンスに差が出るとは思えませんので、コード行数の少ない冒頭に書いたほうのコードでもよいかと思います。
86
+
85
87
 
86
88
 
87
89
  以上、参考になれば幸いです。

8

テキスト修正

2019/09/23 19:23

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- `$('.post')` の中で削除の対象になるものを `filter` で抽出して `remove` すればよいです。それは、たとえば以下で出来ます。
5
+ `$('.post')` の中で削除の対象になるものを `filter` で抽出して `remove` すればよいので、たとえば以下で出来ます。
6
6
 
7
7
 
8
8
 

7

テキスト修正

2019/09/23 18:48

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- `$('.post')` の中で削除の対象になるものを `filter` で抽出して `remove` すればよいので、たとえば以下です。
5
+ `$('.post')` の中で削除の対象になるものを `filter` で抽出して `remove` すればよいです。それは、たとえば以下で出来ます。
6
6
 
7
7
 
8
8
 
@@ -28,7 +28,7 @@
28
28
 
29
29
 
30
30
 
31
- 以上、参考になれば幸いです。
31
+
32
32
 
33
33
 
34
34
 
@@ -79,3 +79,9 @@
79
79
  ```
80
80
 
81
81
  - **動作確認用 CodePen: ** [https://codepen.io/jun68ykt/pen/pozGgwX?editors=1011](https://codepen.io/jun68ykt/pen/pozGgwX?editors=1011)
82
+
83
+
84
+
85
+
86
+
87
+ 以上、参考になれば幸いです。

6

テキスト修正

2019/09/23 18:35

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -44,7 +44,7 @@
44
44
 
45
45
  ```
46
46
 
47
- を実行して、あるテキストを含む 最初の `<div class="post">` を取ってきていますが、これはやや冗長なので、ここをもう少し賢くやるとすれば、filter によるループにおいて出現するテキストをどこかに保存していき、そこに既に入っているテキストを持つ `<div>` が見つかったら、それを削除対象としてfilterで残るようにします。以下は、保存場所として [Set](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set) を使う例です。
47
+ を実行して、あるテキストを含む 最初の `<div class="post">` を取ってきているので、やや無駄なことをやっています。ここをもう少し賢くやるとすれば、filter によるループにおいて出現するテキストをどこかに保存していき、そこに既に入っているテキストを持つ `<div>` が見つかったら、それを削除対象としてfilterで残るようにします。以下は、保存場所として [Set](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set) を使う例です。
48
48
 
49
49
 
50
50
 

5

テキスト修正

2019/09/23 18:33

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -44,7 +44,7 @@
44
44
 
45
45
  ```
46
46
 
47
- を実行して、あるテキストを含む 最初の `<div class="post">` を取ってきていますが、これはやや冗長なので、ここをもう少し賢くやるとすれば、filter によるループにおいて出現したテキストをどこかに保存しておいて、そこに既に入っているテキストを持つ `<div>` が 削除対象としてfilter されるようにします。以下は、保存場所として [Set](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set) を使う例です。
47
+ を実行して、あるテキストを含む 最初の `<div class="post">` を取ってきていますが、これはやや冗長なので、ここをもう少し賢くやるとすれば、filter によるループにおいて出現するテキストをどこかに保存していき、そこに既に入っているテキストを持つ `<div>` が見つかったら、それを削除対象としてfilterで残るようにします。以下は、保存場所として [Set](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set) を使う例です。
48
48
 
49
49
 
50
50
 

4

テキスト修正

2019/09/23 18:28

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -44,7 +44,7 @@
44
44
 
45
45
  ```
46
46
 
47
- を実行して、あるテキストを含む 最初の `<div class="post">` を取ってきていますが、これはやや冗長なので、そこをもう少し賢くやるとすれば、filter によるループにおいて出現したテキストをどこかに保存しておいて、そこに既に入っているテキストを持つ `<div>` が 削除対象としてfilter されるようにします。以下は、保存場所として [Set](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set) を使う例です。
47
+ を実行して、あるテキストを含む 最初の `<div class="post">` を取ってきていますが、これはやや冗長なので、ここをもう少し賢くやるとすれば、filter によるループにおいて出現したテキストをどこかに保存しておいて、そこに既に入っているテキストを持つ `<div>` が 削除対象としてfilter されるようにします。以下は、保存場所として [Set](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set) を使う例です。
48
48
 
49
49
 
50
50
 

3

テキスト修正

2019/09/23 18:26

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -44,7 +44,7 @@
44
44
 
45
45
  ```
46
46
 
47
- を実行して、あるテキストを含む 最初の `<div class="post">` を取ってきていますが、これはやや冗長なので、そこをもう少し賢くやるとすれば、filter によるループにおいて出現したテキストをどこかに保存しておいて、そこに既に入っているテキストを持つ `<div>` が 削除対象としてfilter されるようにします。以下は、保存場所として Set を使う例です。
47
+ を実行して、あるテキストを含む 最初の `<div class="post">` を取ってきていますが、これはやや冗長なので、そこをもう少し賢くやるとすれば、filter によるループにおいて出現したテキストをどこかに保存しておいて、そこに既に入っているテキストを持つ `<div>` が 削除対象としてfilter されるようにします。以下は、保存場所として [Set](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set) を使う例です。
48
48
 
49
49
 
50
50
 

2

テキスト修正

2019/09/23 17:53

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- `$('.post')` の中で削除の対象になるものを `filter` で抽出して `remove` するという方向でやるとすると、以下のような感じでいけるかと思います。
5
+ `$('.post')` の中で削除の対象になるものを `filter` で抽出して `remove` すればよいので、たとえば以下です。
6
6
 
7
7
 
8
8
 

1

テキスト修正

2019/09/23 16:59

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -29,3 +29,53 @@
29
29
 
30
30
 
31
31
  以上、参考になれば幸いです。
32
+
33
+
34
+
35
+ ### 追記
36
+
37
+
38
+
39
+ 上記のコードでは、 `filter` に与える関数の中で、毎回
40
+
41
+ ```
42
+
43
+ $(`.post:contains('${t}')`).get(0)
44
+
45
+ ```
46
+
47
+ を実行して、あるテキストを含む 最初の `<div class="post">` を取ってきていますが、これはやや冗長なので、そこをもう少し賢くやるとすれば、filter によるループにおいて出現したテキストをどこかに保存しておいて、そこに既に入っているテキストを持つ `<div>` が 削除対象としてfilter されるようにします。以下は、保存場所として Set を使う例です。
48
+
49
+
50
+
51
+ ```javascript
52
+
53
+ const set = new Set();
54
+
55
+
56
+
57
+ $('.post').filter(
58
+
59
+ function() {
60
+
61
+ const t = $(this).text();
62
+
63
+ if (set.has(t))
64
+
65
+ return true;
66
+
67
+ else {
68
+
69
+ set.add(t);
70
+
71
+ return false;
72
+
73
+ }
74
+
75
+ }
76
+
77
+ ).remove();
78
+
79
+ ```
80
+
81
+ - **動作確認用 CodePen: ** [https://codepen.io/jun68ykt/pen/pozGgwX?editors=1011](https://codepen.io/jun68ykt/pen/pozGgwX?editors=1011)