# كيفية تحديد وتحرير/إزالة عناصر Ember؟
**URL:** https://meta.discourse.org/t/how-to-identify-and-edit-remove-ember-elements/159624
**Category:** UX
**Created:** [3 أغسطس 2020، 1:15ص UTC](https://meta.discourse.org/t/how-to-identify-and-edit-remove-ember-elements/159624 "2020-08-03T01:15:59Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@b481](https://meta.discourse.org/u/b481)
#### Post date: [3 أغسطس 2020، 1:15ص UTC](https://meta.discourse.org/t/how-to-identify-and-edit-remove-ember-elements/159624/1 "2020-08-03T01:15:59Z")
أنا جديد جدًا في CSS وما شابه، لذا أعتذر إذا كان ما يلي بدائيًا بشكل لا يصدق أو مطولًا.
سؤالي هو: كيف يمكن تحديد وإزالة عناصر “ember” عبر CSS؟ أفترض أن ذلك يتم عبر إضافة “display:none”.
كمثال عشوائي، لنفترض أنني أردت إزالة زر الإشارات المرجعية الموجود في أسفل المواضيع. عند البحث عن العنصر في وحدة تحكم Chrome، يمكنني رؤية CSS الخاص بجميع أزرار تذييل المواضيع بشكل عام، لكن ليس الزر المحدد، لذا لو أضفت “display:none”، فسيتم تطبيقه على جميع الأزرار بدلاً من الزر الواحد فقط.
نتيجة إضافة display:none إلى وسم الزر في CSS.
قبل:
بعد إضافة “display:none”.
بعد:
أنا متأكد تقريبًا من أنه من الممكن إزالة عنصر واحد فقط، وأن هذا سينطبق على عناصر ember الأخرى، والتي تكون معظمها مجمعة بشكل مشابه، حيث تمكنت سابقًا من حذف عناصر ember أخرى (خاصة زر التبرير في شريط المهام للمؤلف) وإن كان ذلك بمساعدة مستخدمين آخرين في هذا المنتدى.
> [@MD Composer extras](https://meta.discourse.org/t/md-composer-extras/118912/23):
>
> How would one remove the center and align left + right buttons? love this component by the way.
ومع ذلك، كيف يمكن تحديد وسم CSS المحدد الذي يمكن إضافة “display:none” إليه؟
مرة أخرى، أعتذر إذا كان هذا بدائيًا بشكل مفرط أو مطولًا.
---
### Author:  [@IAmGav](https://meta.discourse.org/u/IAmGav)
#### Post date: [3 أغسطس 2020، 1:21ص UTC](https://meta.discourse.org/t/how-to-identify-and-edit-remove-ember-elements/159624/2 "2020-08-03T01:21:16Z")
يمكن القيام بذلك من خلال إعدادات المسؤول ولا تحتاج إلى CSS
إعدادات المسؤول \> الإعدادات \> الإعدادات الأساسية \> قائمة المنشورات
---
### Author:  [@b481](https://meta.discourse.org/u/b481)
#### Post date: [4 أغسطس 2020، 2:55ص UTC](https://meta.discourse.org/t/how-to-identify-and-edit-remove-ember-elements/159624/3 "2020-08-04T02:55:40Z")
عذراً إذا قدمت مثالاً سيئاً، حيث لم أكن أعرف أن هناك خياراً خارج CSS. لقد اخترت عنصراً عشوائياً من Ember.
أعتقد أن مثالاً أفضل سيكون في صفحة المستخدم. الحقيقة هي أنني أبحث عن كيفية تحديد ما يمكن وضعه في CSS (مشابهًا للمناقشة المذكورة في موضوع “MD Composer Extras” الذي أشرت إليه أعلاه)، بحيث يمكنك نظرياً إيقاف عنصر Ember عن الظهور.
مثال أفضل سيكون الشريط الجانبي في قسم النشاط ضمن الملف الشخصي. насколько أعرف، لا يوجد خيار محدد لهذا في الإعدادات، بل يتطلب استخدام CSS.
 
---
### Author:  [@neounix](https://meta.discourse.org/u/neounix)
#### Post date: [4 أغسطس 2020، 4:43ص UTC](https://meta.discourse.org/t/how-to-identify-and-edit-remove-ember-elements/159624/4 "2020-08-04T04:43:31Z")
> [@b481](#):
>
> المسألة هي أنني أبحث عن كيفية تحديد ما يمكن إضافته إلى CSS
مرحبًا @b481
ما تبحث عنه يُعرف بـ “محدد CSS” (أو ببساطة “المحدد” للاختصار). تُستخدم محددات CSS لـ “البحث” (أو تحديد، بطبيعة الحال) عنصر DOM الذي ترغب في تنسيقه.
على سبيل المثال، من المكان الذي أكتب منه الآن، سأبحث عن المحدد الخاص باسم مستخدمك في محرر الرسائل (كمثال فقط).
ما نفعله هو وضع الماوس فوق العنصر (اسم المستخدم b481 الخاص بك في المحرر)، ثم نضغط بزر الماوس الأيمن لتظهر قائمة منبثقة تحتوي على عنصر القائمة “فحص” (Inspect).
انقر على “فحص” وسيظهر لك وحدة تحكم المطور (أنا الآن في Chrome على نظام macOS)؛ وبفضل الحظ الجيد، سيتم تمييز العنصر الذي نريده.
إذا نقرت بزر الماوس الأيمن فوق العنصر المميز في وحدة التحكم، فسترى عنصر قائمة “نسخ” → “نسخ المحدد” (Copy selector).
إذا اخترت ذلك ونسخت المحدد، فستحصل في هذا المثال على:
```plaintext
#ember433 > span > a
```
هذا ليس محددًا جيدًا حقًا لأن `#ember433` يتم تعيينه بواسطة Ember، ولكن يمكنك تحريك الماوس فوق العناصر في وحدة التحكم، وسيتم تمييزها في كل من الصفحة المستهدفة ووحدة التحكم. الخبر السار هو أننا اقتربنا من الهدف بسرعة وسهولة.
يمكنك بعد ذلك العثور على العنصر الذي ترغب في إخفائه، وفي هذا المثال، يمكنك النقر بزر الماوس الأيمن مرة أخرى على العنصر (هذا المثال) واختبار ذلك عن طريق اختيار “إضافة سمة” (add attribute) من القائمة أسفل الماوس لاختبار محددنا.
لقد قمت بذلك كمثال في هذه اللقطة:
والآن، تم إخفاء ذلك العنصر بمعرف ‘b481’ في هذا الجزء من DOM…
إذن، نعلم في هذه الحالة أنه إذا استخدمنا CSS:
```plaintext
span.action-title{
display:none;
}
```
فيمكننا إضافته إلى موضوعنا (theme) وسيتم إخفاء ذلك العنصر.
في هذه الحالة، يجب عليك التحقق مما إذا كان هناك أكثر من عنصر واحد في الصفحة يحمل نفس المحدد، كما يجب أن تتأكد من أن المحدد الذي اخترته لن يكون جشعًا في تحديد عناصر في صفحات أخرى قد لا ترغب في إخفائها.
كلما كان المحدد أكثر تحديدًا، كان ذلك أفضل.
على سبيل المثال، في هذه الحالة، يمكننا جعله أكثر تحديدًا عن طريق تحديد أن محددنا هو عنصر تابع لعنصر أب، في هذه الحالة (لم يتم اختباره):
```plaintext
div.compose-action-title > span.action-title{
display:none;
}
```
يمكنك أن ترى أننا أصبحنا أكثر تحديدًا؛ وفي هذه المرحلة، يجب أن تكون لديك فكرة جيدة عن كيفية البحث عن العناصر التي ترغب في تعديلها.
استمتع بالبحث!
ملاحظة أخيرة:
يمكنك استخدام JavaScript وjQuery لتحديد العناصر، لكنني وجدت أنه في تطبيقات الصفحة الواحدة (SPA) مثل Discourse/Ember، تعمل محددات CSS بشكل جيد، على الأقل بالنسبة لي. أميل إلى استخدام محددات JavaScript فقط عندما أحتاج إلى التنقل في DOM بطريقة “معقدة” (وهو ما يمكن أن يكون ممتعًا أيضًا).
أتمنى أن يكون هذا مفيدًا.
انظر أيضًا:
> **[W3Schools.com](https://www.w3schools.com/css/css_selectors.asp)**
>
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
---
### Author:  [@b481](https://meta.discourse.org/u/b481)
#### Post date: [4 أغسطس 2020، 7:51م UTC](https://meta.discourse.org/t/how-to-identify-and-edit-remove-ember-elements/159624/6 "2020-08-04T19:51:30Z")
شكرًا جزيلاً لك @neounix. سأجرب هذا لاحقًا.
---
### Author:  [@b481](https://meta.discourse.org/u/b481)
#### Post date: [5 أغسطس 2020، 2:26ص UTC](https://meta.discourse.org/t/how-to-identify-and-edit-remove-ember-elements/159624/7 "2020-08-05T02:26:36Z")
لقد واجهت مشكلة بسيطة. أثناء محاولة حذف مثال “الإشارات المرجعية” الذي نشرته أعلاه، لم أستطع القيام بذلك لأن رقم الإيمبر المرفق يتغير باستمرار.
إليك الكود الذي استخدمته عندما كان الرقم 52. وقد جربته أيضًا دون استخدام !important.
```
span.ember52.ember-view{
display:none !important;
}
```
---
### Author:  [@neounix](https://meta.discourse.org/u/neounix)
#### Post date: [5 أغسطس 2020، 2:33ص UTC](https://meta.discourse.org/t/how-to-identify-and-edit-remove-ember-elements/159624/8 "2020-08-05T02:33:47Z")
> [@b481](#):
>
> واجهت مشكلة بسيطة. عند محاولة حذف مثال “الإشارات المرجعية” الذي نشرته أعلاه، لا أستطيع ذلك لأن رقم Ember المرفق يتغير باستمرار.
بداية جيدة، لكنها تحتاج إلى تحسين @b481
نعم، لقد ذكرت ذلك بالفعل @b481، ألا تختار محددًا (selector) يعتمد على الفئات والمعرفات التي تُعيّنها Ember.
يجب أن تستخدم محددًا **ليس** فئة أو معرفًا تُعيّنه Ember. لقد شرحت لك كيفية القيام بذلك في ردي السابق.
> ملاحظة جانبية: علماً بأنك في هذا الأسلوب (كما ذكرت أعلاه) لا تقوم بـ “حذف” هذه العناصر من DOM، بل تقوم فقط بـ “إخفائها”، لكن هذا موضوع نناقشه في وقت آخر 🙂
يرجى استخدام محدد لا يتم تعيينه تلقائيًا بواسطة Ember.
أتمنى أن يكون هذا مفيدًا.
* * *
ملاحظة:
إذا كنت تحاول إخفاء (في مثالك) زر الإشارات المرجعية في أسفل الموضوع، هل جربت:
```plaintext
#topic-footer-button-bookmark
{
display:none;
}
```
آسف، لكن بناءً على منشوراتك، لا أعرف بالضبط أي عنصر في DOM (في المثال أو الفعلي) ترغب في إخفائه.
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [5 أغسطس 2020، 9:01ص UTC](https://meta.discourse.org/t/how-to-identify-and-edit-remove-ember-elements/159624/9 "2020-08-05T09:01:41Z")
لإخفاء أحد هذه الأقسام، قم ببساطة بما يلي:
```plaintext
.user-secondary-navigation li:nth-child(3) {
display: none;
}
```
استبدل الرقم بالرقم الذي ترغب في إخفائه.
سيكون هذا فعالاً فقط عندما تكون القائمة متوقعة، وبشكل واضح، وإلا فإن CSS لن يكون حلاً.
---
### Author:  [@b481](https://meta.discourse.org/u/b481)
#### Post date: [7 أغسطس 2020، 12:57ص UTC](https://meta.discourse.org/t/how-to-identify-and-edit-remove-ember-elements/159624/10 "2020-08-07T00:57:23Z")
استغرق مني الأمر بعض الوقت، لكنني نجحت أخيرًا في إتقان الأمر.
شكرًا لك @neounix، كان هذا مفيدًا للغاية وسيكون إضافة كبيرة لمنتداي.
---
### Author:  [@b481](https://meta.discourse.org/u/b481)
#### Post date: [9 أغسطس 2020، 12:52ص UTC](https://meta.discourse.org/t/how-to-identify-and-edit-remove-ember-elements/159624/11 "2020-08-09T00:52:32Z")
هل يعلم أحد كيفية حذف خيار “اقتباس المنشور بالكامل” فقط دون حذف الخيار الموجود على اليسار؟ كلاهما يشارك نفس CSS ونفس div الأب، لذا لم أجد طريقة للتخلص من أحدهما دون الآخر.
---
### Author:  [@neounix](https://meta.discourse.org/u/neounix)
#### Post date: [9 أغسطس 2020، 10:34ص UTC](https://meta.discourse.org/t/how-to-identify-and-edit-remove-ember-elements/159624/12 "2020-08-09T10:34:14Z")
> [@b481](#):
>
> هل يعلم أحد كيف يمكن حذف خيار “اقتباس المنشور بالكامل” فقط دون حذف الخيار الموجود على اليسار؟ كلاهما يشتركان في نفس CSS ونفس div الأب، لذا لم أجد طريقة للتخلص من أحدهما دون الآخر.
مرحبًا @b481
يمكنك استخدام محدد السمة [السمة=القيمة] على النحو التالي:
مرجع:
[https://www.w3schools.com/cssref/sel\_attribute\_value.asp](https://www.w3schools.com/cssref/sel_attribute_value.asp)
مع سمة title وقيمة Blockquote (⌘⇧9)
على سبيل المثال (غير مُختبر):
```plaintext
button[title="Blockquote (⌘⇧9)"]
{
display:none;
}
```
أو ربما:
```plaintext
button[title*="Blockquote"]
{
display:none;
}
```
لم أجربها، لذا قد تحتاج إلى تعديلها قليلاً.
بالإضافة إلى ذلك، هناك طريقة “خشنة” أخرى تتمثل في إخفاء عنصر svg فقط:
```plaintext
svg.d-icon-quote-right
{
display:none;
}
```
هناك محددات CSS أخرى ممكنة يمكن استكشافها أيضًا. أنا متأكد من أن هناك آخرين لديهم محددات أفضل لاقتراحها.
أتمنى أن يساعدك هذا في رحلتك قليلاً.
انظر أيضًا:
1. [CSS Attribute Selectors](https://www.w3schools.com/css/css_attribute_selectors.asp)
2. أدناه
> **[\[attribute\] | CSS-Tricks](https://css-tricks.com/almanac/selectors/a/attribute/)**
>
> There are lots of ways you can select elements in CSS. The most basic selection is by tag name, like p { }. Almost anything more specific than a tag selector