JQuery में "fadeOut" और "div" को कैसे हटाएं?

Question

मैं एक div को फीका प्रभाव देने की कोशिश कर रहा हूं और उस div (id = "सूचना") को हटा सकता हूं, जब कोई छवि क्लिक की जाती है।

यह मैं कैसे कर रहा हूँ:

<a onclick="$("#notification").fadeOut(300,function() { $("#notification").remove(); });" class="notificationClose "><img src="close.png"/></a>

ऐसा लगता है कि काम नहीं कर रहा है। इसे ठीक करने के लिए मुझे क्या करना चाहिए?

Comments

सवाल के लिए 15 वोट और जवाब के लिए 55 वोट ... और यह स्पष्ट रूप से सिर्फ एक टाइपो था ... wtf?

— इवान कैस्टेलानोस

अब ३४ और ११० :) है। यहाँ उतरा क्योंकि मुझे नहीं पता था कि एक तत्व को निकालने के लिए यह कैसे मिट गया (आप अनुमान लगा सकते हैं: मैंने आरटीएफएम नहीं किया था)।

— orique

टाइपो की परवाह किए बिना, प्रश्न Google परिणामों में दिखाई देता है और जब मैं जल्दी से उत्तर पाता हूं तो मैं परेशान हो जाता हूं।

— वलमास

Answer 1

इसे इस्तेमाल करे:

<a onclick='$("#notification").fadeOut(300, function() { $(this).remove(); });' class="notificationClose "><img src="close.png"/></a>

मुझे लगता है कि आपके आसपास के दोहरे उद्धरण onclickयह काम नहीं कर रहे थे। :)

संपादित करें : जैसा कि नीचे बताया गया है, इनलाइन जावास्क्रिप्ट बुराई है और आपको संभवतः इसे बाहर निकालना चाहिए onclickऔर इसे jQuery के click()ईवेंट हैंडलर में स्थानांतरित करना चाहिए । ऐसा ही कूल बच्चे आजकल कर रहे हैं।

Comments

आपको जावास्क्रिप्ट इनलाइन का उपयोग नहीं करना चाहिए, क्योंकि यह लगातार तरीके से बदलना मुश्किल बनाता है।

— निक बेर्दी

मैं इसकी निंदा नहीं करता, मैं बस उस आदमी को उसकी समस्या से निजात दिलाने में मदद कर रहा हूँ। कभी-कभी मैं प्रचार करता हूं, मैं बस जाग गया और मैं "अतिरिक्त मील" मूड में नहीं हूं। आपकी पोस्ट हालांकि काम करती है। :)

— पाओलो बेरेनटिनो

क्या आप बता सकते हैं कि ऑनक्लिक हैंडलर बुराई कैसे है? क्या यह केवल स्थिरता के कारण है या कोई तकनीकी कारण है?

— पैन्ज़ी

क्या वास्तव में हर बार जब आप एक पृष्ठ पर जावास्क्रिप्ट की एक पंक्ति चाहते हैं तो यह एक अलग फाइल के लायक है? मुझे लगता है कि इनलाइन की अपनी जगह है।

— केसी

Answer 2

आपको वास्तव में एक अलग फ़ाइल में jQuery का उपयोग करने की कोशिश करनी चाहिए, इनलाइन नहीं। यहाँ आप की जरूरत है:

<a class="notificationClose "><img src="close.png"/></a>

और फिर यह आपके पृष्ठ के निचले भाग में <script>बहुत कम या बाहरी जावास्क्रिप्ट फ़ाइल में टैग में है।

$(".notificationClose").click(function() {
    $("#notification").fadeOut("normal", function() {
        $(this).remove();
    });
});

Comments

मैंने यह कोशिश की, लेकिन यह काम नहीं कर सका। ऊपर इनलाइन लिंक ने काम किया, और दोनों व्यावहारिक रूप से समान हैं। यहाँ यह है ... jsfiddle.net/AndyMP/DBrf5

— एंडी

@Andy: आप सभी jQuery के पुस्तकालय स्थापित करने के लिए भूल गया के पहले;) दूसरा, यदि आप अपनी साइट पर इसका इस्तेमाल आप भी में लपेट की जरूरत है $(document).ready(function() {और });। (jsField पर यह ऑनलोड है इसलिए यह आपके लिए ऐसा करता है)

— नाथन

@ निक बेर्डी, क्या हम इसे पेज डाउन स्क्रॉल के साथ कर सकते हैं?

— सुपर मॉडल

Answer 3

यदि आप इसे कई अलग-अलग जगहों पर उपयोग कर रहे हैं, तो आपको इसे एक प्लगइन में बदलना चाहिए।

jQuery.fn.fadeOutAndRemove = function(speed){
    $(this).fadeOut(speed,function(){
        $(this).remove();
    })
}

और तब:

// Somewhere in the program code.
$('div').fadeOutAndRemove('fast');

Comments

मैं बस यह

— देखना

Answer 4

क्या आपने यह कोशिश की है?

$("#notification").fadeOut(300, function(){ 
    $(this).remove();
});

यही है, इस संदर्भ का उपयोग करके आंतरिक फ़ंक्शन में तत्व को लक्षित करना है न कि आईडी। मैं हर समय इस पैटर्न का उपयोग करता हूं - यह काम करना चाहिए।

Answer 5

यदि आप मेरे जैसे कुछ भी Google खोज से आ रहे हैं और शांत एनीमेशन के साथ एक html तत्व निकालना चाहते हैं, तो यह आपकी मदद कर सकता है:

$(document).ready(function() {
    
    var $deleteButton = $('.deleteItem');

    $deleteButton.on('click', function(event) {
    
        event.preventDefault();

        var $button = $(this);

        if(confirm('Are you sure about this ?')) {

            var $item = $button.closest('tr.item');

            $item.addClass('removed-item')

                .one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {

                    $(this).remove();
            });
        }
      
    });
    
});

/**
 * Credit to Sara Soueidan
 * @link https://github.com/SaraSoueidan/creative-list-effects/blob/master/css/styles-3.css
 */

.removed-item {
    -webkit-animation: removed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29);
    -o-animation: removed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29);
    animation: removed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29)
}

@keyframes removed-item-animation {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0)
    }

    30% {
        opacity: 1;
        -webkit-transform: translateX(50px);
        -ms-transform: translateX(50px);
        -o-transform: translateX(50px);
        transform: translateX(50px)
    }

    80% {
        opacity: 1;
        -webkit-transform: translateX(-800px);
        -ms-transform: translateX(-800px);
        -o-transform: translateX(-800px);
        transform: translateX(-800px)
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(-800px);
        -ms-transform: translateX(-800px);
        -o-transform: translateX(-800px);
        transform: translateX(-800px)
    }
}

@-webkit-keyframes removed-item-animation {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    30% {
        opacity: 1;
        -webkit-transform: translateX(50px);
        transform: translateX(50px)
    }

    80% {
        opacity: 1;
        -webkit-transform: translateX(-800px);
        transform: translateX(-800px)
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(-800px);
        transform: translateX(-800px)
    }
}

@-o-keyframes removed-item-animation {
    0% {
        opacity: 1;
        -o-transform: translateX(0);
        transform: translateX(0)
    }

    30% {
        opacity: 1;
        -o-transform: translateX(50px);
        transform: translateX(50px)
    }

    80% {
        opacity: 1;
        -o-transform: translateX(-800px);
        transform: translateX(-800px)
    }

    100% {
        opacity: 0;
        -o-transform: translateX(-800px);
        transform: translateX(-800px)
    }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th>id</th>
        <th>firstname</th>
        <th>lastname</th>
        <th>@twitter</th>
        <th>action</th>
      </tr>
    </thead>
    <tbody>
      
      <tr class="item">
        <td>1</td>
        <td>Nour-Eddine</td>
        <td>ECH-CHEBABY</td>
        <th>@__chebaby</th>
        <td><button class="btn btn-danger deleteItem">Delete</button></td>
      </tr>
      
      <tr class="item">
        <td>2</td>
        <td>John</td>
        <td>Doe</td>
        <th>@johndoe</th>
        <td><button class="btn btn-danger deleteItem">Delete</button></td>
      </tr>
      
      <tr class="item">
        <td>3</td>
        <td>Jane</td>
        <td>Doe</td>
        <th>@janedoe</th>
        <td><button class="btn btn-danger deleteItem">Delete</button></td>
      </tr>
    </tbody>
  </table>
  
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />


</body>
</html>

Answer 6

.fadeOut ('धीमी', this.remove);

Answer 7

उपयोग

.fadeOut(360).delay(400).remove();

Comments

यह काम नहीं करता है, इस removeविधि के तुरंत बाद बुलाया जाता हैfadeOut

— Iulian Onofrei